我正在处理聊天应用程序。我可以发送和接收消息。但我想在右侧显示发送消息并在左侧接收消息
var grp = angular.module("grpApp", [])
.controller("grpCtrl", function ($scope, $state, $http, $stateParams) {
$scope.uName = $state.params.usermail;
console.log("bigid" + " " + $scope.digId);
document.getElementById("frndName").innerHTML = "Group";
$scope.message = '';
$scope.messages = [];
/*...............................image upload......................................*/
$("#profileImage").click(function (e) {
$("#imageUpload").click();
});
function fasterPreview(uploader) {
if (uploader.files && uploader.files[0]) {
$('#profileImage').attr('src',
window.URL.createObjectURL(uploader.files[0]));
}
}
$("#imageUpload").change(function () {
fasterPreview(this);
});
/*...............................image upload end................................*/
var socket = io('http://colourssoftware.com:3000/chat');
console.log("socket" + socket);
console.log("devi" + socket);
var username = $scope.uName;
var noChat = 0; //setting 0 if all chats histroy is not loaded. 1 if all chats loaded.
var msgCount = 0; //counting total number of messages displayed.
var oldInitDone = 0; //it is 0 when old-chats-init is not executed and 1 if executed.
var roomId; //variable for setting room.
var toUser;
//passing data on connection.
socket.on('connect', function () {
socket.emit('set-user-data', $scope.uName);
console.log("emitted" + $scope.uName);
}); //end of connect event.
//receiving onlineStack.
socket.on('onlineStack', function (stack) {
$('#list').empty();
$('#list').append($('<li>').append($('<button id="ubtn" class="btn btn-primary btn btn-sm"></button>').text("Group").css({
"font-size": "13px"
})));
var totalOnline = 0;
for (var user in stack) {
//setting txt1. shows users button.
if (user == $scope.uName) {
var txt1 = $('<span></span>').text(user).css({
"font-size": "13px"
});
} else {
var txt1 = $('<span id="ubtn"></span>').text(user).css({
"font-size": "13px"
});
}
//setting txt2. shows online status.
if (stack[user] == "Online") {
var txt2 = $('<span></span>').text("*" + stack[user]).css({
"float": "right",
"color": "#009933",
"font-size": "13px"
});
totalOnline++;
} else {
var txt2 = $('<span></span>').text(stack[user]).css({
"float": "right",
"color": "#a6a6a6",
"font-size": "13px"
});
}
//listing all users.
$('#list').append($('<li>').append(txt1, txt2));
$('#totalOnline').text(totalOnline);
} //end of for.
$('#scrl1').scrollTop($('#scrl1').prop("scrollHeight"));
}); //end of receiving onlineStack event.
//on button click function.
$(document).on("click", "#ubtn", function () {
// $scope.toUser = touser;
console.log("username" + toUser);
//empty messages.
$('#messages').empty();
$('#typing').text("");
msgCount = 0;
noChat = 0;
oldInitDone = 0;
//assigning friends name to whom messages will send,(in case of group its value is Group).
toUser = $(this).text();
//showing and hiding relevant information.
$('#frndName').text(toUser);
$('#initMsg').hide();
$('#chatForm').show(); //showing chat form.
$('#sendBtn').hide(); //hiding send button to prevent sending of empty messages.
//assigning two names for room. which helps in one-to-one and also group chat.
if (toUser == "Group") {
var currentRoom = "Group-Group";
var reverseRoom = "Group-Group";
} else {
var currentRoom = username + "-" + toUser;
var reverseRoom = toUser + "-" + username;
}
//event to set room and join.
socket.emit('set-room', {
name1: currentRoom,
name2: reverseRoom
});
console.log("room" + currentRoom + " " + reverseRoom);
});
//event for setting roomId.
socket.on('set-room', function (room) {
//empty messages.
$('#messages').empty();
$('#typing').text("");
msgCount = 0;
noChat = 0;
oldInitDone = 0;
//assigning room id to roomId variable. which helps in one-to-one and group chat.
roomId = room;
console.log("roomId : " + roomId);
//event to get chat history on button click or as room is set.
socket.emit('old-chats-init', {
room: roomId,
username: $scope.uName,
msgCount: msgCount
});
$scope.deleteCht = function () {
$http({
url: 'http://colourssoftware.com:3000/clearchat/' + roomId,
method: 'DELETE',
}).then(function (res) {
//document.getElementById("scrl2").value = "";
//data.result.length = 0;
console.log("del chat " + JSON.stringify(res.data));
}, function (error) {
console.log("errorblock" + error);
});
}
}); //end of set-room event.
//on scroll load more old-chats.
$('#scrl2').scroll(function () {
if ($('#scrl2').scrollTop() == 0 && noChat == 0 && oldInitDone == 1) {
$('#loading').show();
socket.emit('old-chats', {
room: roomId,
username: username,
msgCount: msgCount
});
}
}); // end of scroll event.
//listening old-chats event.
socket.on('old-chats', function (data) {
if (data.room == roomId) {
console.log("name" + JSON.stringify(data));
oldInitDone = 1; //setting value to implies that old-chats first event is done.
if (data.result.length != 0) {
$('#noChat').hide(); //hiding no more chats message.
for (var i = 0; i < data.result.length; i++) {
//styling of chat message.
var chatDate = moment(data.result[i].createdOn).format("MMMM Do YYYY, hh:mm:ss a");
var txt1 = $('<span></span>').text(data.result[i].msgFrom + " : ").css({
"color": "#006080"
});
var txt2 = $('<span></span>').text(chatDate).css({
"float": "right",
"color": "#a6a6a6",
"font-size": "16px"
});
var txt3 = $('<p></p>').append(txt1, txt2);
var txt4 = $('<p></p>').text(data.result[i].msg).css({
"color": "#000000"
});
//showing chat in chat box.
$('#messages').prepend($('<li>').append(txt3, txt4));
msgCount++;
} //end of for.
console.log(msgCount);
} else {
$('#noChat').show(); //displaying no more chats message.
noChat = 1; //to prevent unnecessary scroll event.
console.log("devi");
}
//hiding loading bar.
$('#loading').hide();
//setting scrollbar position while first 5 chats loads.
if (msgCount <= 5) {
$('#scrl2').scrollTop($('#scrl2').prop("scrollHeight"));
}
} //end of outer if.
}); // end of listening old-chats event.
// keyup handler.
$('#myMsg').keyup(function () {
if ($('#myMsg').val()) {
$('#sendBtn').show(); //showing send button.
socket.emit('typing');
} else {
$('#sendBtn').hide(); //hiding send button to prevent sending empty messages.
}
}); //end of keyup handler.
//receiving typing message.
socket.on('typing', function (msg) {
var setTime;
//clearing previous setTimeout function.
clearTimeout(setTime);
//showing typing message.
$('#typing').text(msg);
//showing typing message only for few seconds.
setTime = setTimeout(function () {
$('#typing').text("");
}, 3000);
}); //end of typing event.
//sending message.
$('form').submit(function () {
socket.emit('chat-msg', {
msg: $('#myMsg').val(),
msgTo: toUser,
date: Date.now()
});
console.log("date" + Date.now());
$('#myMsg').val("");
$('#sendBtn').hide();
return false;
});
//end of sending message.
//receiving messages.
socket.on('chat-msg', function (data) {
//styling of chat message.
var chatDate = moment(data.date).format("MMMM Do YYYY, hh:mm:ss a");
var txt1 = $('<span></span>').text(data.msgFrom + " : ").css({
"color": "#006080"
});
var txt2 = $('<span></span>').text(chatDate).css({
"float": "right",
"color": "#a6a6a6",
"font-size": "13px"
});
var txt3 = $('<p ></p>').append(txt1, txt2);
var txt4 = $('<p></p>').text(data.msg).css({
"color": "#000000"
});
//showing chat in chat box.
$('#messages').append($('<li>').append(txt3, txt4));
msgCount = msgCount + 1;
console.log(msgCount);
$('#typing').text("");
$('#scrl2').scrollTop($('#scrl2').prop("scrollHeight"));
}); //end of receiving messages.
//on disconnect event.
//passing data on connection.
socket.on('disconnect', function () {
//showing and hiding relevant information.
$('#list').empty();
$('#messages').empty();
$('#typing').text("");
$('#frndName').text("Disconnected..");
$('#loading').hide();
$('#noChat').hide();
$('#initMsg').show().text("...Please, Refresh Your Page...");
$('#chatForm').hide();
msgCount = 0;
noChat = 0;
}); //end of connect event.
//end of function.
/*...................................socket...................................................*/
/* $http.get("http://colourssoftware.com:3000/friendrequests/" + $scope.uName)
.then(function (response) {
$scope.seefrnds = response.data;
console.log("response" + " " + JSON.stringify(response.data));
$scope.reqName = response.requestname;
//console.log("array print" + JSON.stringify($scope.usersList));
}, function (response) {
console.log("response");
});
*/
/*FRIEND REQUESTS*/
//$scope.userName = $state.params.usermail;
console.log("username:" + $scope.uName);
$scope.userId = $state.params.userid;
$scope.msgFrm = $state.params.usermail;
$scope.uid = $state.params.user;
$scope.frndN;
$scope.msgdata = [];
$scope.frndData = [];
var frndata = {
method: 'GET',
url: 'http://colourssoftware.com:3000/userslist',
}
//document.getElementById("name").innerHTML = "Group";
$scope.usersList = [];
$scope.friendsList = [];
var d = new Date();
$scope.time = d.toLocaleString();
console.log("hlooo" + $scope.time);
/*document.getElementById("myMsg").addEventListener("keyup", function (event) {
if (event.keyCode == 13) {
document.getElementById("sendBtn").click();
}
});*/
/*getting all the friends accepted by me and who accepts me*/
$scope.acceptedFrnds = [];
$scope.getFrnds = function () {
$http.get("http://colourssoftware.com:3000/Accept_Requests/" + $scope.uid)
.then(function (response) {
console.log("acceptedlist" + JSON.stringify(response));
$scope.acceptedFrnds = response.data;
},
function (response) {
console.log("error");
});
$http.get("http://colourssoftware.com:3000/Accepted_By_Others/" + $scope.msgFrm)
.then(function (response) {
console.log("acceptedbyothers" + JSON.stringify(response));
$scope.acceptedFrnds = response.data;
},
function (response) {
console.log("error");
});
}
$scope.fgrp = function (name) {
document.getElementById("frndName").innerHTML = name;
}
$scope.frndgrp = function (frnd) {
document.getElementById("name").innerHTML = frnd;
$scope.msgdata = [];
$scope.frndN = frnd;
console.log("frndnnnnn" + $scope.frndN);
}
console.log("hiauhdurhk" + $scope.frndN);
/*sending chat messages*/
$scope.send = function () {
$scope.msgdata = [];
//console.log("shgsd" + frnds);
document.getElementById("submitmsg").disabled = false;
$scope.msgdata.push($scope.message + " " + " " + $scope.time);
/*posting the chat messages*/
var data = {
"msgFrom": $scope.msgFrm,
"msgTo": $scope.frndN,
"msg": $scope.msgdata,
"room": $scope.msgFrm
};
console.log(data);
var req = {
method: 'POST',
url: 'http://colourssoftware.com:3000/chatroute',
data: data
}
$http(req).then(function (response) {
console.log("hjhuhjh" + JSON.stringify(response.data));
$scope.msgdata = "";
$scope.displayFun();
}, function (response) {
console.log(response);
});
$scope.displayFun = function () {
$http.get("http://colourssoftware.com:3000/chathistory")
.then(function (response) {
$scope.msgdata = response.data;
console.log("array print" + JSON.stringify($scope.msgdata));
}, function (response) {
console.log("error block");
// $window.sessionStorage.setItem("Mydata", JSON.stringify($scope.usersList));
});
}
// $http.get("http://192.168.2.48:3000/chathistory")
// .then(function (response) {
//
// $scope.msgdata = response.data;
//
// console.log("array print" + JSON.stringify($scope.msgdata));
//
// // $window.sessionStorage.setItem("Mydata", JSON.stringify($scope.usersList));
// });
//$scope.msgdata = "";
}
$scope.showGrp = function () {
document.getElementById("frndName").innerHTML = "Group";
$scope.msgdata = [];
// var retData = localStorage.getItem("storedData");
// var retrieveData = JSON.parse(retData);
//console.log("heloooo" + retrieveData);
// $scope.msgdata.push(retrieveData);
}
$scope.deleteFrnd = function (Id) {
// $scope.seefrnds.splice(index, 1);
$scope.Id = Id;
console.log("show id" + Id);
$http({
url: 'http://colourssoftware.com:3000/deletefriends/' + $scope.Id,
method: 'DELETE',
data: {
id: $scope.Id
},
// headers: {
// "Content-Type": "application/json;charset=utf-8"
// }
}).then(function (res) {
console.log(JSON.stringify(res.data));
}, function (error) {
console.log("errorblock" + error);
});
}
});<main>
<div class="container-fluid">
<input type="hidden" id="user" value="<%= user.username %>" />
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="height:500px;overflow: scroll">
<div class="panel-heading">
<div data-toggle="modal" data-target="#myModal">
<img class="img-circle" src="images.jpg" width="80px" height="80px" style="float:left">
<span>{{uName}}</span>
<h5></h5>
</div>
<!--model------------------------------------------------------------------->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" id="profile-container">
<img class=" img-circle " src="images.jpg" width="80px" height="80px" align='center' id="profileImage">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<input id="imageUpload" type="file" name="profile_photo" placeholder="Photo" required="" capture align="center" ng-hide=true>
<div class="modal-body">
<p>Some text in the modal.</p>
<p ng-bind="uName"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!--------------------------------------------------- model close------------------------------------->
<br>
<br>
<br>
<input type="text" name="search" placeholder="Search.." class="search focus" id="Searchtab1">
<h4>Friends</h4>
</div>
<div class="panel-body list-group" id="scrl1">
<ul id="list" style="cursor: pointer" class="list-group list-group-item"></ul>
</div>
<!--<div class="panel-footer">
<p id="typing"></p>
</div>-->
</div>
</div>
<div class=".space"></div>
<div>
<div class="col-sm-8">
<!--<script>
document.div.style.backgroundImage = url("p.jpg");
</script>-->
<div class="panel panel-primary" style="height:500px;overflow: scroll">
<div class="panel-heading">
<h4 id="frndName" align="center">Chat Room</h4>
<span id="typing"></span>
<i class="glyphicon glyphicon-trash" style="float:right;margin-top:-4%" ng-click="deleteCht()" title="clear chat"></i>
</div>
<div class="panel-body" id="scrl2">
<p id="loading">Loading.....</p>
<p id="noChat">No More Chats To Display.....</p>
<p id="initMsg">!!...Click On User Or Group Button To Start Chat...!!</p>
<ul id="messages"></ul>
</div>
<div class="panel-footer input-group" style="width:100%">
<form id="chatForm" action="" onsubmit="return false">
<input id="myMsg" class="input-box-send form-control" ng-model="message" autocomplete="off" style="width:90%" placeholder="Write Message Here.." />
<button type="submit" id="sendBtn" class=" btn btn-primary " style="width:10%" ng-disabled="!message" name="btn"><span class="glyphicon glyphicon-send"></span></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
side.how我可以满足这个要求吗？ 在这里，我附上了我的代码。
答案 0 :(得分：0)
使用以下组合：
display: flex; flex-direction: column; align-self: flex-end关于孩子一切都应该很容易实现。
.chat {
display: flex;
/* column reverse to have chat-style message ordering*/
flex-direction: column-reverse;
}
.message {
border: 1px solid gray;
margin: 5px;
padding: 5px;
width: 60%;
}
.message.is-sent {
background: cyan;
/* use align-self */
align-self: flex-end;
}
.message.is-received {
background: pink;
}<div class="chat">
<div class="message is-received">
Received - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus corporis delectus in mollitia nulla numquam perferendis, porro provident sint ullam! A eos ipsum maiores quisquam vero? Enim nihil quisquam rerum.
</div>
<div class="message is-sent">
Sent - Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus corporis delectus in mollitia nulla numquam perferendis, porro provident sint ullam! A eos ipsum maiores quisquam vero? Enim nihil quisquam rerum.
</div>
</div>
答案 1 :(得分：-1)
只需为左右对齐的块创建两个类。当你向消息展示这个添加类时。例如。对于您发送的邮件item--left-align。
但是，你必须不要忘记伪元素
.item--left-align {
float: left;
}
.item--left-align:after,
.item--left-align:before {
content: '';
display: table;
clear: both;
}
你需要它来控制会改变float