基于websocket实现Web群聊

阅读：评论：0

基于websocket实现Web群聊

安装node中ws模块

npm install ws

Node中处理代码

const WebSocket = require("ws");
const wsServer = new WebSocket.Server({port:3000});
var maps = new Map();
var number = 0;
var sendMessage = {};
('connection',(socket) => {console.log("Client Connected");number++;socket.userID = number;let client = {userID:socket.userID,Connection:socket}maps.set(socket.userID,client);pe='enter';ssage="user"+socket.userID+"进来了!";broadCast(JSON.stringify(sendMessage));('message',(message) => {console.log('received:'+message);pe='message';ssage="user"+socket.userID+":"+message+".";broadCast(JSON.stringify(sendMessage));});('close', () => {console.log('Connected Close');pe='close';ssage="user"+socket.userID+" leave out!";maps.delete(socket.userID);broadCast(JSON.stringify(sendMessage));});function broadCast(message) {for(let val of maps.values()) {val.Connection.send(message);}}
});

页面代码：

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"/><title>websocket群聊</title>
</head>
<body><div id="app"><input type="text" id="text"/><button id="send">发送</button><div id="content"></div></div>
</body>
</html>
<script>var websocket = new WebSocket("ws://127.0.0.1:3000");var dataList = [];pen = function (event) {console.log("正在建立连接...");}lose = function (closeEvent) {console.log("连接正在关闭...");dataList = [];}ssage = function (message) {console.log(message);let data = message.data;if (typeof data == "string") {data = JSON.parse(data);}//接受来自服务器发送的消息dataList.push(data);showMessage(dataList);}r = function (event) {console.log("连接发生错误");console.log(event);}function showMessage(data) {let html = "";for (let i =0;i<data.length;i++) {let type = data[i].type;if (type == 'enter') {html+="<div style='color:deepskyblue'>"+data[i].message+"</div>";} else if (type == 'message') {html+="<div style='color:black'>"+data[i].message+"</div>";} else if (type == 'close') {html+="<div style='color:red'>"+data[i].message+"</div>";}}//将元素动态显示到页面上document.querySelector('#content').innerHTML = html;}beforeunload = function (){websocket.close();}document.querySelector('#send').onclick = function() {let text = document.querySelector('#text').value;console.log(text);websocket.send(text);}</script>

实现效果

本文发布于:2024-01-28 00:53:59，感谢您对本站的认可！

本文链接：https://www.4u4v.net/it/17063744413670.html

上一篇：DDR4读写测试（二）：基本读写测试

下一篇：NIO系列：5.NIO群聊系统

标签：websocket Web 群聊

留言与评论（共有 0 条评论）