Nodejs+webSocket搭建多人聊天室

2022-12-12 19:35| 来源: 网络整理| 查看: 265

Nodejs+webSocket搭建多人聊天室思创斯忠实用户-ss • 2022年12月1日 21:51 • 未分类

Nodejs+webSocket搭建多人聊天室NodeJs+webSocket搭建多人聊天室准备的东西：第一步：安装插件并且完善服务端第二步：搭建客户端并与服务端的通信第三步：添加CSS样式第四步：总结今天花了一个上午的时间去学习了一下使用nodejs＋websocket搭建多人聊天室。下面我分享下我做这个多人聊天室案例的整个过程。先看下最终的效果图上图的功能包括：显示在线人数，在同一房间可以互相发送消息，显示在线用户的列表.下…

大家好，我是你的好朋友思创斯。今天说一说Nodejs+webSocket搭建多人聊天室,希望您对编程的造诣更进一步.

NodeJs+webSocket搭建多人聊天室准备的东西：第一步：安装插件并且完善服务端第二步：搭建客户端并与服务端的通信第三步：添加CSS样式第四步：总结

今天花了一个上午的时间去学习了一下使用nodejs＋websocket搭建多人聊天室。下面我分享下我做这个多人聊天室案例的整个过程。

先看下最终的效果图

上图的功能包括：显示在线人数，在同一房间可以互相发送消息，显示在线用户的列表. 下面我讲一步一步的分解我写的这个案例。

准备的东西： Nodejs 的基础 node环境熟悉npm的使用 nodejs-websocket插件前端部分用到的websocket一些事件： WebSocket 前端部分事件以及方法事件处理程序描述 open Socket.onopen 连接建立时触发 message Socket.onmessage 客户端接收服务端数据时触发 error Socket.onerror 通信发生错误时触发 close Socket.onclose 连接关闭时触发 WebSocket 方法以下是 WebSocket 对象的相关方法。假定我们使用了以上代码创建了 Socket 对象：方法描述 Socket.send() 使用连接发送数据 Socket.close() 关闭连接举个例子：在建立连接时会出发ws.onopen函数，在收到服务器发来的消息时会自动触发ws.onmessage函数，在用户关闭网页或者手动关闭连接时会触发ws.onclose函数。发送数据的时候使用ws.send函数即可，发送的内容作为参数。具体的使用方法在后面会讲到。后端部分用到的websocket： connect.on('text',callback) connect.on('close',callback) connect.on('error',callback) 第一步：安装插件并且完善服务端

创建一个js文件命名为app.js 并且进入命令行模式执行 : 安装nodejs-websocke插件

npm install nodejs-websocket --save

app.js文件：

这一步写完后启动node服务

第二步：搭建客户端并与服务端的通信

app.html文件：

小贱贱的多人聊天在线人数设置发送在线用户列表: //定义全局的变量 let ws = null; //封装获取时间的函数 Date.prototype.Format = function (fmt) { //author: xjj var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }; //封装创建Div并且发送消息的函数 const createChatDiv = (data)=> { let div = document.createElement('div'); let p_time = document.createElement('p'); let p_content = document.createElement('p'); switch (data.type) { case 'serverInformation': p_time.innerHTML = new Date().Format("yyyy-MM-dd hh:mm:ss"); p_content.innerHTML = data.message; break; case 'chat': p_time.innerHTML = new Date().Format("yyyy-MM-dd hh:mm:ss"); p_content.innerHTML = data.name+":"+data.message; break; default: break; } p_time.setAttribute('class' ,'time'); p_content.setAttribute('class','content'); div.appendChild(p_time); div.appendChild(p_content); return div; }; //封装发送消息的函数 const send = ()=>{ let message = document.getElementById('message'); //设置不能够发送空消息 if(!message.value){ return } let data = { type:'chat', message:message.value }; ws.send(JSON.stringify(data)); message.value = "" }; let setName = document.getElementById('setName'); setName.onclick = ()=> { let userName = document.getElementById('userName'); let nickName = "我没有起名字"; if (userName.value) { nickName = userName.value; } //建立连接,并发送连接进入房间(并且连接会一直保存,进行服务端的轮询) ws = new WebSocket('ws://127.0.0.1:3000'); //连接上来的时候 ws.onopen = () => { let data = { type: 'setName', nickname: nickName }; ws.send(JSON.stringify(data)) }; //发送消息的时候 document.getElementById('sendMessage').onclick = ()=>{ send(); }; //当接受服务端的请求的时候 ws.onmessage = (e) => { let data = JSON.parse(e.data); console.log(data); //接受的消息为连接的人的个数的时候 if (data.type === 'chatterList') { let list = data.list; let length = list.length; let userList = document.getElementById('userList'); document.getElementById('onLine').innerText = `在线人数${ length}人`; for(let i=0;i

【本文地址】

公司简介

联系我们