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

时间:2023-07-14 20:05:44

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

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

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

1.2 用户登录

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

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

图1.2 系统登陆页面

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

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

图1.3 用户名非法提示页面

1.3 聊天界面

聊天室有如下功能:

(1)对聊天室内当前在线人数进行统计,并按照进入聊天室顺序进行排列显示。

(2)新用户加入聊天室会有提示说明,包括用户名和进入聊天室时间。

(3)用户退出聊天室会有提示说明,包括退出用户的用户名和离开聊天室时间。

(4)对加入聊天室的新用户有历史记录显示,让新用户不错过任何历史聊天信息。

(5)网络出现故障会有对应提示。

1.3.1 聊天室主页面

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

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

图1.4 聊天室主页面

1.3.2 新用户进入聊天室提示

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

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

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

1.3.3 用户退出聊天室提示

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

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

图1.6 用户退出聊天室提示

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

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

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

图1.7 显示历史记录

1.3.5 网络出现故障提示

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

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

图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 的简易聊天室

代码地址如下:
http://www.demodashi.com/demo/13282.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权