基于Node.js + WebSocket 的简易聊天室

本是古典何须时尚 2022-05-12 08:26 435阅读 0赞

> 代码地址如下：  
> [http://www.demodashi.com/demo/13282.html][http_www.demodashi.com_demo_13282.html]

# Node.js聊天室运行说明 #

Node.js的本质就是运行在服务端的JavaScript。Node.js是基于Chrome浏览器运行JavaScript时建立的一个平台。该平台可以非常快速以及高效的执行JavaScript，并且性能非常优越。Node.js还优化了一些特殊用例，内置了常用的API，这样使得该平台在非浏览器环境下运行得更好。  
因为其是运行在V8引擎下，所以本地先要安装node运行环境，然后通过node命令来执行js代码。以达到预期效果。

#### 1.1安装nodejs ####

如图1.1所示。

![hUhc51l1Sc6jDh52Svv.png][]

图1.1 通过node命令执行js文件

### 1.2　用户登录 ###

用户输入用户名，系统会判断输入的用户名是否合法。如果合法，进入聊天界面。如果不合法，需要重新键入。系统登录页面如图1.2所示。

![unxMPYNN9aiaIBiz1X2.png][]

图1.2 系统登陆页面

用户输入用户名，若用户名可用，点击即可进入聊天室，若用户名非法，则需重新输入。提示页面如图1.3所示。

![ZCzwJZjhrMA3aQXIWL7.png][]

图1.3 用户名非法提示页面

### 1.3　聊天界面 ###

聊天室有如下功能：  
(1)对聊天室内当前在线人数进行统计，并按照进入聊天室顺序进行排列显示。  
(2)新用户加入聊天室会有提示说明，包括用户名和进入聊天室时间。  
(3)用户退出聊天室会有提示说明，包括退出用户的用户名和离开聊天室时间。  
(4)对加入聊天室的新用户有历史记录显示，让新用户不错过任何历史聊天信息。  
(5)网络出现故障会有对应提示。

#### 1.3.1　聊天室主页面 ####

用户登录后，进入聊天界面。可以看到当前在线用户数以及对应用户名。界面如图1.4所示。

![cnphVwyxa3YpWhUzipk.png][]

图1.4 聊天室主页面

#### 1.3.2　新用户进入聊天室提示 ####

有新用户进入聊天室，会有提示信息。包括进入聊天室用户的用户名和进入聊天室的时间。如图1.5所示。

![2tWyHjFMxfVtM9bBhtn.png][]

图1.5 新用户进入聊天室提示

#### 1.3.3　用户退出聊天室提示 ####

用户退出聊天室，会有对应提示，包括退出聊天室的用户名和退出时间，聊天室内用户都可见。且对当前在线用户数量进行实时刷新。如图1.6所示。

![QTiCwFnzqP2GdpOEBlF.png][]

图1.6 用户退出聊天室提示

#### 1.3.4　新用户加入显示历史聊天记录 ####

新用户进入聊天室，会显示历史聊天记录。这样系统显得尤为人性化。如图1.7所示。

![RVorWw0khPvv4C5CklX.png][]

图1.7 显示历史记录

#### 1.3.5　网络出现故障提示 ####

关闭后台node运行环境，取消监听固定端口，或者网络出现其他故障，会提示网络出现错误。如图1.8所示。

![YO0n4Bij4OnSsfK9QJu.png][]

图1.8 网络错误提示

# Node.js聊天室代码说明 #

> 基于Node.js和WebSocket的聊天室，主要包括前端页面，主要是用户操作的页面，还包括后台数据通信以及逻辑处理。整个程序分为大概三部分，包括前端显示页面，还有就是js脚本，最后一个是node服务，前端会用html，css，jQuery去实现，服务会用node.js去写，利用websocket去做通信，去做持久连接，达到通信聊天功能，最后开启node服务，运行脚本即可。

#### 2.1.1　前端核心代码 ####

前端页面用HTML+CSS+JavaScript来实现，整个聊天页面布局恰当。人性化的提示信息做的比较多。所以前端代码非常简单。就是一些DIV嵌套，固定各自的类名和ID。还有一些文本框和按钮，通过CSS来控制它们的样式，部分代码

#### 2.1.2　服务端核心代码 ####

聊天室的核心后台代码，就是启动HTTP服务，实现HTTP请求。并且监听固定端口号。通过WebSocket来实现前后端数据的通信。以下代码就是用Node.js的固定模块，request模块，来实现实现HTTP请求，启动HTTP服务，并监听本地的80端口。实现了前后端的通信连接。实现代码。

//使用socket.io直接启动http服务
    var io = require("socket.io").listen(PORT);
    io. sockets.on ("connection', function (socket) { socket.on('message",function(message){
    var mData = chatLib.analyzeMessageData(message);
    if (mData && mData.EVENT) { switch (mData.EVENT) { case EVENT_TYPE.LOGIN:// 新用户连接
    var newUser = {uid:socket.id, 'nick':chatLib.getMsgFirstDataValue(mData)};
    //把新连接的用户增加到在线用户列表 onlineUserMap.put(socket.id, newUser);
    //把新用户的信息广播给在线用户 
    var data = JSON.stringify({
    'user':onlineUserMap.get(socket.id,
    'EVENT' : EVENT_TYPE.LOGIN,
    'values': newUser,
    'users':onlineUserMap.values,
    'historyContent':rhistoryContent.values()
    });
    Io.sockets.emit ('message1, data') ;//广播
    socket .broadcast. emit ('message' , data);//无效 break;
    
    
        function (exports) {
            //事件类型
            exports.EVENT_TYPS = {}
    
            //服务靖口
            exports.PORT = 80;
    
            //服务靖口
            exports.HOST.MlocalhostM;
            LOGOUTLOGOUT_SPEAK1: 'SPEAK1'
            var analyzeMessageData = exports.analyzeMessageData = function (message)
            try {
                return JSOK.parse(message);
            } catch (error) {
                //收到了非正常格式的数据
                console.log('method'
                    analyzeMsgData, error: 1 + error);
                return null;
            }

#### 2.1.3　服务端在线用户显示代码 ####

此代码实现的是在线用户的实时统计与显示。当有新用户进入，或者有用户退出的时候，会有一个动态刷新，以统计最新数据。通过用循环把用户的ID作为标识，来统计当前在线人数。通过动态添加DOM节点来将新用户显示排列在聊天页面上。部分代码如下所示。

function updateOnlineUser() {
            var html = "<div> 在线用> (" + onlineUserMap.size() + ")</div>";
            if (onlineUserMap.size() > 0) {
                var users = onlineUserMap.values();
                var number = users.length;
                for (var i = 0; i < number; i++) {
                    html.push(users);
                    if (users[i].uid == currentUser.uid) {
                        html.push("<b>" + formatUserString(users[i]) + "</b>");
                    } else {
                        html.push(formatUserString(users[i]));
                    }
                    html.push("</div>" >
                        $("#onlineUsers").html(html.join('')))

#### 2.1.4　服务端用户登入退出以及网络断开连接代码 ####

有新用户进入聊天室，在登录页面输入一个用户名，后台会随机给分配一个socket id。然后动态添加或者移除DOM节点，就可以在页面显示某某用户加入聊天室，某某用户离开聊天室。  
当然了，还要考虑到一些异常情况，并在其中进行适当处理。比如出现某种未知的错误，会提示“系统繁忙”。这样，显得系统更为人性化。代码如下所示。

updateOnlineUser();
        appendMessage(formatUserTalkString(user) + "[进入房间]")
        var EVENT_TYPE_LOGOUT; // 用户退出 var user = mData.values[0]; 
        onlineUserMap.remove(user.uid);
        updateOnlineUser();
        appendMessage(formatUserTalkString(user) + "[离开房间]"
                case EVENT_TYPE.SPEAK: // 用户发言 var content = mData.values[0];
                    appendMessage(formatUserTalkString(mData.user)); appendMessage("<span>  </span>" +
                        content);
                    break;
                case EVENT_TYPE.ERROR: // 出错了
                    appendMessage("[系或繁忙]");
                    break;
                default:
                    break;

# 总结 #

这个聊天室的主要难点在用没有过多接触过的Node.js对前端数据的处理以及前后端数据的通信。一方面自己接触的后台语言本来也不多，再加上平时主要是写静态的前端页面，前后端结合来写，经历不是非常多。所以，刚开始并不知道如何进行前后端的数据通信，最后通过自己学习摸索，从最开始的安装Node环境，到最后学会利用Node.js的request模块来启动HTTP服务，并监听固定端口，实现前后端的简单链接。最后在简单的基础上加了一些人性化的功能，比如对应操作会有提示，对用户名有非法判断，显示系统时间等。总得来说，收获蛮大，自己对项目构建以及代码实现都说的非常清楚，希望能帮助到大家。基于Node.js + WebSocket 的简易聊天室

> 代码地址如下：  
> [http://www.demodashi.com/demo/13282.html][http_www.demodashi.com_demo_13282.html]
> 
> 注：本文著作权归作者，由demo大师发表，拒绝转载，转载需要作者授权

[http_www.demodashi.com_demo_13282.html]: http://www.demodashi.com/demo/13282.html
[hUhc51l1Sc6jDh52Svv.png]: /images/20220512/ca86a3c6fa274d44953c837c10800d0b.png
[unxMPYNN9aiaIBiz1X2.png]: /images/20220512/759976b89f3b41b7bc631545a48dabdb.png
[ZCzwJZjhrMA3aQXIWL7.png]: /images/20220512/0e1030166dd34f5493a212938dcbd6e4.png
[cnphVwyxa3YpWhUzipk.png]: /images/20220512/ca90223ca92a41a389fc125fe6e9de9f.png
[2tWyHjFMxfVtM9bBhtn.png]: /images/20220512/24b66247d3e84252bb2681f142c56faa.png
[QTiCwFnzqP2GdpOEBlF.png]: /images/20220512/63a1b39b7e504bfba9f6aa08bac7825c.png
[RVorWw0khPvv4C5CklX.png]: /images/20220512/d01040299b1f46e4b3a82c99f47330a3.png
[YO0n4Bij4OnSsfK9QJu.png]: /images/20220512/2e1fb7d0c2d3452ebb3486ac0d2c4048.png