I am bulding a chat app with angular on the front end and socket io for the chat platform.
我正在构建一个聊天应用程序,其前端为角形,聊天平台为socket io。
I want to have a diffenet css class for the sender in the chat (the one who sends the message in the chat) and for the side that recieves the message.
我想为聊天中的发件人(在聊天中发送消息的人)和收到消息的一方提供diffenet css类。
to do that I've created 2 classes in my css: "sender" and "reciever".
要做到这一点,我已经在我的CSS中创建了2个类:“sender”和“reciever”。
I want that when my socket gets a message from the "sender" (aka "the speaker side") - the li class will be "sender". when the socket gets a message from outside (some other member in the chat the is not me) the class will be "reciever".
我希望当我的套接字从“发件人”(又名“发言人方”)收到消息时,li类将是“发件人”。当套接字从外部收到消息时(聊天中的其他成员不是我),该类将是“接收者”。
like the green and white here: http://www.androidpolice.com/wp-content/uploads/2015/07/nexus2cee_whatsapp-middle-finger-2.png
像这里的绿色和白色:http://www.androidpolice.com/wp-content/uploads/2015/07/nexus2cee_whatsapp-middle-finger-2.png
I know that I can change the class in angluar using the ng-class directive.
我知道我可以使用ng-class指令更改angluar中的类。
The problem is that when I do the class manipulate all the messages in my chat became a part of that class (I am using ng-repeat directive).
问题是,当我操作类时,聊天中的所有消息都成为该类的一部分(我正在使用ng-repeat指令)。
and what I want is that 1 message will be class A and other message will be from class B and 3rd message will be class A.... so on...
我想要的是1条消息将是A类,其他消息将来自B类,第3条消息将是A类....所以......
I know that I should somehow use the ng-class propertie like:
我知道我应该以某种方式使用ng-class属性,如:
<li ng-class={'sender' : message.sender, 'btn-off' : !message.sender} ng-repeat="message in messages track by $index">{{message}}</li>
but how can I get the message object (which is a string to include a boolean as well?
但是如何获取消息对象(这也是一个包含布尔值的字符串?
can you please help me to figure out how I can write the code for that?
你可以帮我弄清楚如何为此编写代码吗?
this is my controler
这是我的控制器
mymodule.controller("cntrlChat", ['$scope', 'myService','$q','$timeout',
function($scope, myService,$q,$timeout){
var socket = io();
$scope.messages = [];
$scope.message_type="sender";
$scope.room= myService.get().room;
$scope.name= myService.get().name;
socket.emit('room', $scope.room);
$scope.submit=function(){
socket.emit('chat_message',{ room: $scope.room, msg: $scope.name+": "+$scope.insertedText });
$scope.message_type="sender";
$scope.messages.push($scope.name+": "+$scope.insertedText);
$scope.insertedText='';
return false;
}
socket.on('chat_message', function(msg){
$scope.$apply(function() {
$scope.message_type="receiver";
$scope.messages.push(msg);
});
});
socket.on('info_message', function(msg){
$scope.$apply(function() {
$scope.info=msg;
});
});
this is the server.js file:
这是server.js文件:
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var path = require('path');
app.use(express.static(path.join(__dirname, '/')));
app.get('/', function(req, res){
res.sendFile(__dirname + '/Index.html');
});
io.on('connection', function(socket){
io.emit('chat_message', "welcome");
socket.on('room', function(room) {
socket.join(room);
});
socket.on('chat_message', function(data){
socket.broadcast.to(data.room).emit('chat_message',data.msg);
});
socket.on('info_message', function(data){
socket.broadcast.to(data.room).emit('info_message',data.msg);
});
socket.on('disconnect', function(){
io.emit('chat message', "Bye");
});
});
http.listen((process.env.PORT || 3000), function(){
console.log('listening on *:3000 '+ __dirname);
});
this is the html for my chat:
这是我聊天的html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="chat">
<div class="members">
{{users}}
</div>
<div class="messages">
<ul>
<li ng-class="message_type" ng-repeat="message in messages track by $index">{{message}}</li>
</ul>
</div>
<form ng-submit="submit()">
{{info}}
<br>
<input autocomplete="off" ng-model="insertedText" ng-change="isUserTyping()" type="text" />
<button type="button" ng-click="submit()">
Send
</button>
</form>
</div>
</body>
1 个解决方案
#1
1
Ok let's take a crack at this.
好吧,让我们来解决这个问题吧。
On a high level description, we want the socket to pass messages between users.
在高级描述中,我们希望套接字在用户之间传递消息。
The best way to ensure we know who sent what is to make sure the data we pass has the right details.
确保我们知道谁发送了什么的最佳方法是确保我们传递的数据具有正确的详细信息。
With that being said, you just need to turn the msg from a string to an object and pass that around with a flag (I used sender/receiver, you can use sender: true/false):
话虽如此,你只需要将msg从一个字符串转换为一个对象并用标志传递它(我使用发送者/接收者,你可以使用sender:true / false):
$scope.submit=function(){
//
// change msg to an object (I don't know io well so it may need to be json encoded decoded?)
//
socket.emit('chat_message', {
room: $scope.room,
msg: {
text: $scope.name+": "+$scope.insertedText,
status: 'sender'
}
});
//
// push the data obj to your messages array
//
$scope.messages.push(msg)
$scope.insertedText='';
return false;
}
socket.on('chat_message', function(data){
$scope.$apply(function() {
//
// we expect data to look like the data above except we'll change the flag when it's retrieved
//
data.status = 'received'
$scope.messages.push(data);
});
});
socket.on('info_message', function(msg){
$scope.$apply(function() {
$scope.info=msg;
});
});
We're now passing objects with flags to and from the node server without modification on the server side so that code doesn't need to change at all.
我们现在正在向节点服务器传递带有标志的对象,而不在服务器端进行修改,因此代码根本不需要更改。
Finally, the angular part:
最后,角度部分:
<div class="chat">
<div class="members">
{{users}}
</div>
<div class="messages">
<ul>
//
// ng class stuff
// (ternary) ng-class="message.status === 'received' ? 'class1' : 'class2'"
//
<li ng-class="{'class1': message.status === 'sender', 'class2': message.status === 'received'}" ng-repeat="message in messages track by $index">{{message.text}}</li>
</ul>
</div>
<form ng-submit="submit()">
{{info}}
<br>
<input autocomplete="off" ng-model="insertedText" ng-change="isUserTyping()" type="text" />
<button type="button" ng-click="submit()">
Send
</button>
</form>
</div>
#1
1
Ok let's take a crack at this.
好吧,让我们来解决这个问题吧。
On a high level description, we want the socket to pass messages between users.
在高级描述中,我们希望套接字在用户之间传递消息。
The best way to ensure we know who sent what is to make sure the data we pass has the right details.
确保我们知道谁发送了什么的最佳方法是确保我们传递的数据具有正确的详细信息。
With that being said, you just need to turn the msg from a string to an object and pass that around with a flag (I used sender/receiver, you can use sender: true/false):
话虽如此,你只需要将msg从一个字符串转换为一个对象并用标志传递它(我使用发送者/接收者,你可以使用sender:true / false):
$scope.submit=function(){
//
// change msg to an object (I don't know io well so it may need to be json encoded decoded?)
//
socket.emit('chat_message', {
room: $scope.room,
msg: {
text: $scope.name+": "+$scope.insertedText,
status: 'sender'
}
});
//
// push the data obj to your messages array
//
$scope.messages.push(msg)
$scope.insertedText='';
return false;
}
socket.on('chat_message', function(data){
$scope.$apply(function() {
//
// we expect data to look like the data above except we'll change the flag when it's retrieved
//
data.status = 'received'
$scope.messages.push(data);
});
});
socket.on('info_message', function(msg){
$scope.$apply(function() {
$scope.info=msg;
});
});
We're now passing objects with flags to and from the node server without modification on the server side so that code doesn't need to change at all.
我们现在正在向节点服务器传递带有标志的对象,而不在服务器端进行修改,因此代码根本不需要更改。
Finally, the angular part:
最后,角度部分:
<div class="chat">
<div class="members">
{{users}}
</div>
<div class="messages">
<ul>
//
// ng class stuff
// (ternary) ng-class="message.status === 'received' ? 'class1' : 'class2'"
//
<li ng-class="{'class1': message.status === 'sender', 'class2': message.status === 'received'}" ng-repeat="message in messages track by $index">{{message.text}}</li>
</ul>
</div>
<form ng-submit="submit()">
{{info}}
<br>
<input autocomplete="off" ng-model="insertedText" ng-change="isUserTyping()" type="text" />
<button type="button" ng-click="submit()">
Send
</button>
</form>
</div>