0.目标与前置条件
这一节，我将实现用户修改昵称与收发消息。
这一节内容是在上一节完成的情况下进行的，请先参照上一节完成基本框架的搭建：
Node.js（Express4.x）搭建聊天室1——基本框架
我把搭建聊天室的步骤分成了几个部分，请按顺序阅读：
获取代码
Node.js（Express4.x）搭建聊天室1——基本框架
Node.js（Express4.x）搭建聊天室2——消息发送与监听
Node.js（Express4.x）搭建聊天室3——完善网页
1. 服务端
接下来的代码，要添加到model/chatroom.js的“//在这里添加更多监听的消息”后面：
/* *************** 更改昵称 *************** */
socket.on('change_name', function (newname) {
if (addedUser) {
var oldname = socket.username;
socket.username = newname;
// 告知所有用户
socket.broadcast.emit('name_changed', {
username: newname,
msg: "["+oldname+"] 改名为 ["+socket.username + "]",
type: "BROADCAST",
numUsers: guest_num
});
}
});
/* *************** 发送消息 *************** */
socket.on('send_msg', function (msg) {
if (addedUser) {
// 广播消息
socket.broadcast.emit('msg_sent', {
username: socket.username,
msg: msg,
type: "BROADCAST",
});
}
});
我在这里新增了两个监听接口：
- change_name：当服务端接收到该消息时，会将一起传来的newname替换用户当前的username，并存储在socket.username中，然后广播告知所有用户。
- send_msg：当服务端接收到该消息时，将把一起传来的msg广播给所有用户。
2. 客户端
在views/index.jade文件中，在“// 添加更多的消息发送或监听”后面添加如下代码：
//修改昵称
function change_name(name){
socket.emit('change_name', name, function (data) {
console.log(data);
});
}
// 监听修改昵称后返回的消息
socket.on('name_changed', function (data) {
console.log(data);
});
//发送消息
function send_msg(msg){
socket.emit('send_msg', msg, function (data) {
console.log(data);
});
}
// 监听消息
socket.on('msg_sent', function (data) {
console.log(data);
});
这里我们定义了两个函数：
- change_name：调用后，客户端向服务端发送“change_name”消息，从而把自己的昵称修改为name。
- send_msg：调用后，客户端向服务器端发送“send_msg”消息，服务端会把msg广播给所有用户。
对应的，我们还新增了两个监听：
- name_changed：监听服务端发出的“name_changed”消息。当聊天室中有用户修改了昵称后，服务端会向所有人发出该消息。
- msg_sent： 监听服务端发出的“msg_sent”消息。当聊天室中有用户发出消息，服务端会转发给所有人。
3.整理一下思路
当客户端1发出“change_name”消息给服务端后，服务端会修改该用户的昵称，并广播一条“name_changed”的消息给所有用户（这里是客户端2和客户端3），如下图所示：
当客户端1发出“send_msg”消息给服务端后，服务端广播一条“msg_sent”的消息给所有用户（这里是客户端2和客户端3），如下图所示：
4.测试
分别打开两个浏览器A、B，访问http://127.0.0.1:3000。
在浏览器B的控制台中，输入change_name("Mike的读书季")，即把浏览器B的用户昵称改为“Mike的读书季”；执行后，在浏览器A中会收到“[Mike] 改名为 [Mike的读书季]”的消息。
在浏览器B的控制台中，输入send_msg("欢迎你们！")，即浏览器B的用户发送消息“欢迎你们！”；执行后，在浏览器A中会收到“欢迎你们！”的消息。
5.小结
至此，一个聊天室的“骨架”就算搭好了。接下来，为了让这个聊天室真正可用，还要在客户端的页面上做一些处理；这个应该是前端工程师的工作，不过作为一个Node工程师，通吃前后端本来就是应该的，所以我打算越俎代庖，把前端也一起做了。
欢迎阅读下一节：
Node.js（Express4.x）搭建聊天室3——完善网页
原创文章，未经许可，请勿转载
作者：Mike的读书季
日期：2016.09.20
QQ：1139904786
Blog：http://blog.csdn.net/kkdestiny
