NodeJsNode.js专题程序员

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

2016-09-20  本文已影响554人  Mike的读书季

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",
            });
        }
      });

我在这里新增了两个监听接口:


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);
});

这里我们定义了两个函数:

对应的,我们还新增了两个监听:


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

上一篇下一篇

猜你喜欢

热点阅读