Javascript聊天室:如何确定向谁发送消息?

时间:2019-03-06 19:19:27

标签: javascript html css node.js angularjs

所以我有一个聊天室,所以如果收件人是All或ALL广播,那么我有这个工作,因此如果您的名字是'Sam',它会发送“私人消息:”文本 我不知道如何检查名册中的用户名并将其仅私下发送给该用户。

我的js是:

//
// # SimpleServer
//
// A simple chat server using Socket.IO, Express, and Async.
//
var http = require('http');
var path = require('path');

var async = require('async');
var socketio = require('socket.io');
var express = require('express');

//
// ## SimpleServer `SimpleServer(obj)`
//
// Creates a new instance of SimpleServer with the following options:
//  * `port` - The HTTP port to listen on. If `process.env.PORT` is set, _it overrides this value_.
//
var router = express();
var server = http.createServer(router);
var io = socketio.listen(server);

router.use(express.static(path.resolve(__dirname, 'client')));
var messages = [];
var sockets = [];
var users = {};

io.on('connection', function (socket) {
    messages.forEach(function (data) {
      socket.emit('message', data);
    });

    sockets.push(socket);

    socket.on('disconnect', function () {
      sockets.splice(sockets.indexOf(socket), 1);
      updateRoster();
    });

    // Message Received
    socket.on('message', function (msg, recipient) {
      var text = String(msg || '');

      if (!text)
        return;

        messages.push(msg);

        var messageType;

        if (recipient != '' && recipient != ' ' && recipient != 'All' && recipient != 'all') {
        messageType = "private";
      } else {
        messageType = "public";
      }

      socket.get('name', function (err, name) {
        var data = {
          messageType: messageType,
          recipient: recipient,
          name: name,
          text: text
        };

        broadcastMessage('message', data);
        messages.push(data);
      });
    });

    socket.on('identify', function (name) {
      socket.set('name', String(name || 'Anonymous'), function (err) {
        updateRoster();
      });
    });
  });

function updateRoster() {
  async.map(
    sockets,
    function (socket, callback) {
      socket.get('name', callback);
    },
    function (err, names) {
      broadcast('roster', names);
    }
  );
}

function broadcastMessage(event, data) {
  let counter = 0;
  let senderSocket;
  let recipientSocket;

  if (data.messageType === "public"){
    sockets.forEach(function (socket) {
      socket.emit('message', data); // send msg to all users
    });

  } else {
    sockets.forEach(function (socket) {  //HELP
      if (data.recipient === 'Sam')
         socket.emit('message', );
      /* var person = socket.get('name', callback);
      if (data.recipient === person){ // if true, recipient exists
        socket.emit('message', data);
        counter++; // if counter === 0, no user with recipient name exists
        recipientSocket = socket;
        recipientSocket.emit('message', data);
        // socket.emit('message', data); // send private msg to recipient
      } */

        //else if (data.name === socket.username){
        // send msg to sender 
        //senderSocket = socket;
        // senderSocket.emit(event, data);
        //}

    });
  }

  if (data.messageType === "private") {

    //console.log("counter: " + counter);
    //if (counter === 0){
    //  senderSocket.emit('userNotFound', data);
    //} else {

    //}
  }
}


function broadcast(event, data) {
  sockets.forEach(function (socket) {
    socket.emit(event, data);
  });
}

server.listen(process.env.PORT || 3000, process.env.IP || "0.0.0.0", function(){
  var addr = server.address();
  console.log("Chat server listening at", addr.address + ":" + addr.port);
});

我的html和angular.js看起来像:

<!doctype html>
<html lang="en" ng-app>
  <head>
    <img src="bermanology-logo.png" alt="Bermanology">
    <title>Chat Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-responsive.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>
      body {
        padding-top: 60px;
      }
    </style>
     <script>
      function ChatController($scope) {
        var socket = io.connect();

        $scope.messages = [];
        $scope.roster = [];
        $scope.name = '';
        $scope.recipient = '';
        $scope.text = '';
        $scope.errorMessage = '';
        $scope.usernameError = '';
        $scope.nameIsUnique = false;



        $scope.validateUserName = function(){
          var counter = 0;
          if ($scope.name != ''){
            $scope.setName($scope.name);
            for (var i = 0; i < $scope.roster.length; i++){
              if ($scope.roster[i] === $scope.name){
                counter++;
                $scope.usernameError = "username already taken";
              }
            }
            if (counter === 0){
              $scope.nameIsUnique = true;
            }
            $scope.roster.push($scope.name);
            socket.emit('identify', $scope.name);
          }
        }

        socket.on('connect', function () {
          $scope.setName();
        });

        socket.on('message', function (msgData) {
          if (msgData.messageType == "private"){
            msgData.text = "private message: " + msgData.text;
          } else {
          }
          $scope.messages.push(msgData);
          $scope.errorMessage = '';
          $scope.$apply();
        });

        socket.on('userNotFound', function (data) {
          console.log("user not found!");

          $scope.errorMessage = "User '" + data.recipient + "' not found";
          $scope.$apply();
        });

        socket.on('roster', function (names) {
          $scope.roster = names;
          $scope.$apply();
        });

        $scope.send = function send() {
          socket.emit('message', $scope.text, $scope.recipient);
          $scope.recipient = '';
          $scope.text = '';
        };

        $scope.setName = function setName(name) {
          socket.emit('identify', name);
        };

      }

    </script>
  </head>
  <body>
    <div class="container" ng-controller="ChatController">
      <div class="navbar navbar-fixed-top navbar-inverse">
        <div class="navbar-inner">
          <div class="pull-right">
            <a href="https://c9.io" class="brand">Cloud9 IDE</a>
          </div>
        </div>
      </div>
      <div class="page-header">
        <h1>Chat Example</h1>
      </div>
      <div ng-show="!nameIsUnique">
        <form ng-submit="validateUserName()">
          <div class="span2" ng-bind="usernameError"></div>
          <div class="span2"><input type="text" class="input-block-level" ng-model="name" placeholder="Your Name"></div>
          <input type="submit" class="span2 btn btn-primary" value="Enter chat">
        </form>
      </div>

      <div class="row" ng-show="nameIsUnique">
        <div class="span3">
          <ul class="nav nav-list well">
            <li class="nav-header">Local Users</li>
            <li ng-repeat="user in roster" ng-bind="user">
            </li>
          </ul>
        </div>
        <div class="span9">
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th class="span2">User</th>
                <th class="span2">Message To</th>
                <th class="span7">Text</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="msg in messages">
                <td class="span2" ng-bind="msg.name"></td>
                <td class="span2" ng-bind="msg.recipient"></td>
                <td class="span7" ng-bind="privateMsgInfo + msg.text"></td>
              </tr>
            </tbody>
          </table>
          <div class="row controls">
            <form ng-submit="send()">
              <div class="input-append span7">
                <input type="text" class="span4" ng-model="recipient" placeholder="Recipient"><br>
                <input type="text" class="span6" ng-model="text" placeholder="Message">
                <input type="submit" class="span2 btn btn-primary" value="Send" ng-disabled="!text">
              </div>
            </form>
          <div class="span6" ng-bind="errorMessage"></div>
          </div>
        </div>
      </div>
    </div>
    <script src="/socket.io/socket.io.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/angular.min.js"></script>
  </body>
</html>

请帮助

2 个答案:

答案 0 :(得分:0)

代替

var sockets = [];

您应该使用

var sockets = {};

然后映射用户名=>套接字,例如

sockets['fred'] 

将为您提供fred所在的插槽

答案 1 :(得分:0)

我只需要设置一个字符串即可知道用户的正确名称

相关问题