神刀安全网

Node.js(Express4.x)搭建聊天室2——消息发送与监听

0.目标与前置条件

这一节,我将实现用户修改昵称与收发消息。

Node.js(Express4.x)搭建聊天室2——消息发送与监听
修改昵称与收发消息

这一节内容是在上一节完成的情况下进行的,请先参照上一节完成基本框架的搭建:
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),如下图所示:

Node.js(Express4.x)搭建聊天室2——消息发送与监听
修改昵称的流程

当客户端1发出“send_msg”消息给服务端后,服务端广播一条“msg_sent”的消息给所有用户(这里是客户端2和客户端3),如下图所示:

Node.js(Express4.x)搭建聊天室2——消息发送与监听
发送消息和监听消息


4.测试

分别打开两个浏览器A、B,访问http://127.0.0.1:3000。

在浏览器B的控制台中,输入change_name(“Mike的读书季”),即把浏览器B的用户昵称改为“Mike的读书季”;执行后,在浏览器A中会收到“[Mike] 改名为 [Mike的读书季]”的消息。

在浏览器B的控制台中,输入send_msg(“欢迎你们!”),即浏览器B的用户发送消息“欢迎你们!”;执行后,在浏览器A中会收到“欢迎你们!”的消息。

Node.js(Express4.x)搭建聊天室2——消息发送与监听
更改昵称和发送消息


5.小结

至此,一个聊天室的“骨架”就算搭好了。接下来,为了让这个聊天室真正可用,还要在客户端的页面上做一些处理;这个应该是前端工程师的工作,不过作为一个Node工程师,通吃前后端本来就是应该的,所以我打算越俎代庖,把前端也一起做了。

欢迎阅读下一节:
Node.js(Express4.x)搭建聊天室3——完善网页


原创文章,未经许可,请勿转载
作者:Mike的读书季
日期:2016.09.20
QQ:1139904786
Blog:http://blog.csdn.net/kkdestiny

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Node.js(Express4.x)搭建聊天室2——消息发送与监听

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址