第五章 用户发话

前面我们给聊天室添加了用户上线提醒功能，但并没有实现聊天室最核心的功能 —— 聊天。现在，我们给聊天室添加群聊和点对点聊天（即私聊）的功能。流程图如下：

对应代码修改如下：
打开 chat.js ，在 now() 函数后添加如下代码：

//发话
$("#say").click(function() {
  //获取要发送的信息
  var $msg = $("#input_content").html();
  if ($msg == "") return;
  //把发送的信息先添加到自己的浏览器 DOM 中
  if (to == "all") {
    $("#contents").append('<div>你(' + now() + ')对 所有人 说：<br/>' + $msg + '</div><br />');
  } else {
    $("#contents").append('<div style="color:#00f" >你(' + now() + ')对 ' + to + ' 说：<br/>' + $msg + '</div><br />');
  }
  //发送发话信息
  socket.emit('say', {from: from, to: to, msg: $msg});
  //清空输入框并获得焦点
  $("#input_content").html("").focus();
});

在 socket.on('online') 函数下面添加如下代码：

socket.on('say', function (data) {
  //对所有人说
  if (data.to == 'all') {
    $("#contents").append('<div>' + data.from + '(' + now() + ')对 所有人 说：<br/>' + data.msg + '</div><br />');
  }
  //对你密语
  if (data.to == from) {
    $("#contents").append('<div style="color:#00f" >' + data.from + '(' + now() + ')对 你 说：<br/>' + data.msg + '</div><br />');
  }
});

最后，打开 app.js ，在 socket.on('online') 函数下面添加如下代码：

//有人发话
socket.on('say', function (data) {
  if (data.to == 'all') {
    //向其他所有用户广播该用户发话信息
    socket.broadcast.emit('say', data);
  } else {
    //向特定用户发送该用户发话信息
    //clients 为存储所有连接对象的数组
    var clients = io.sockets.clients();
    //遍历找到该用户
    clients.forEach(function (client) {
      if (client.name == data.to) {
        //触发该用户客户端的 say 事件
        client.emit('say', data);
      }
    });
  }
});

现在，我们给聊天室添加了群聊和私聊的功能。
注意：双击右侧用户名方可私聊。