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

最新推荐文章于 2022-05-01 20:49:06 发布

weixin_34008933

最新推荐文章于 2022-05-01 20:49:06 发布

阅读量337

点赞数

文章标签：前端 javascript 网络 ViewUI

代码地址如下：
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所示。

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

1.2　用户登录

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

图1.2 系统登陆页面

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

图1.3 用户名非法提示页面

1.3　聊天界面

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

1.3.1　聊天室主页面

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

图1.4 聊天室主页面

1.3.2　新用户进入聊天室提示

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

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

1.3.3　用户退出聊天室提示

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

图1.6 用户退出聊天室提示

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

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

图1.7 显示历史记录

1.3.5　网络出现故障提示

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

图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来控制它们的样式，部分代码

<div id='prePage' class='page' style='width:690px;text-align:center;'>
    <input id='nickinput' type='text' placeholder="请输入您的昵称">&nbsp;
    <input id='open' type='button' />
</div>
<div id='mainPage' class='page' style='display:none;'>
    <div style=' overflow:hidden; '>
        <div class='talkLeft '>
            <div id='talkFrame '></div>
            <div id='inputDiv '>
                <textarea placeholder="喃，随便说点啥叹" id="me3sage" /textarea>
            </div>
            <div style='overflow:hidden; '>
                <input class='f-right ' type='button ' value='发送 ' id="send" /> </div>
        </div>
        <div class='talkRight '>
            <div id='onlineUsers '> </div>
        </div>
    </div>
    <div class='text-alignreenter'>
        <input type='button' value='退出 ' id='flogoutM' />
    </div>
</div>

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>&nbsp;&nbsp;</span>" +
                    content);
                break;
            case EVENT_TYPE.ERROR: // 出错了
                appendMessage("[系或繁忙]");
                break;
            default:
                break;

总结

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