角度和套接字 io 类操作答案

【问题标题】：angular and socket io class manipulation角度和套接字 io 类操作
【发布时间】：2016-11-20 08:49:15
【问题描述】：

我正在为聊天平台构建一个前端带有 Angular 和套接字 io 的聊天应用程序。

我想为聊天中的发送者（在聊天中发送消息的人）和接收消息的一方设置一个不同的 css 类。

为此，我在我的 css 中创建了 2 个类：“发送者”和“接收者”。

我希望当我的套接字从“发件人”（又名“扬声器方”）收到消息时 - li 类将是“发件人”。当套接字从外部（聊天中的其他成员不是我）收到消息时，该类将是“接收者”。

喜欢这里的绿色和白色：http://www.androidpolice.com/wp-content/uploads/2015/07/nexus2cee_whatsapp-middle-finger-2.png

我知道我可以使用 ng-class 指令更改 Angular 中的类。

问题是，当我对类进行操作时 all 我聊天中的消息成为该类的一部分（我正在使用 ng-repeat 指令）。

我想要的是 1 条消息将是 A 类，其他消息将来自 B 类，第三条消息将是 A 类......等等......

我知道我应该以某种方式使用 ng-class 属性，例如：

<li ng-class={'sender' : message.sender, 'btn-off' : !message.sender} ng-repeat="message in messages track by $index">{{message}}</li>

但是我怎样才能得到消息对象（它也是一个包含布尔值的字符串？

你能帮我弄清楚如何为此编写代码吗？

这是我的控制器

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>

【问题讨论】：

标签： javascript angularjs node.js sockets

【解决方案1】：

好的，让我们来看看这个。

在高级描述中，我们希望套接字在用户之间传递消息。

确保我们知道谁发送了什么的最佳方法是确保我们传递的数据具有正确的详细信息。

话虽如此，您只需将 msg 从字符串转换为对象并使用标志传递（我使用了发送方/接收方，您可以使用发送方：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;
    });
  });

我们现在将带有标志的对象传入和传出节点服务器，而无需在服务器端进行修改，因此根本不需要更改代码。

最后是角部分：

<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>

【讨论】：