我正在构建一个聊天应用程序，前端带有 Angular，聊天平台带有 Socket io。
我想为聊天中的发送者(在聊天中发送消息的人)和接收消息的一方提供一个不同的 css 类。
为此，我在 css 中创建了 2 个类:“sender”和“reciever”。
我希望当我的套接字从“发送者”(又名“扬声器端”)收到消息时 - li 类将是“发送者”。当套接字从外部(聊天中的其他成员不是我)收到消息时，该类将成为“接收者”。
喜欢这里的绿色和白色:http://www.androidpolice.com/wp-content/uploads/2015/07/nexus2cee_whatsapp-middle-finger-2.png
我知道我可以使用 ng-class 指令更改 angluar 中的类。
问题是，当我对类进行操作所有时，我聊天中的消息就成为该类的一部分(我正在使用 ng-repeat 指令)。
我想要的是 1 条消息将是 A 类，其他消息将来自 B 类，第 3 条消息将是 A 类......依此类推......
我知道我应该以某种方式使用 ng-class 属性，例如:
<li ng-class={'sender' : message.sender, 'btn-off' : !message.sender} ng-repeat="message in messages track by $index">{{message}}</li>
但是我如何获取消息对象(它是一个也包含 bool 值的字符串？
你能帮我弄清楚如何为此编写代码吗？
这是我的 Controller
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;
});
});
这是 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);
});
这是我的聊天的 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>
最佳答案
好吧，让我们来尝试一下。
在高级描述中，我们希望套接字在用户之间传递消息。
确保我们知道谁发送了内容的最佳方法是确保我们传递的数据具有正确的详细信息。
话虽这么说，您只需将消息从字符串转换为对象，然后使用标志传递它(我使用发送者/接收者，您可以使用发送者: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;
});
});
我们现在在 Node 服务器之间传递带有标志的对象，而无需在服务器端进行修改，因此代码根本不需要更改。
最后是 Angular 部分:
<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>
关于javascript - Angular 和套接字 io 类操作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38424970/