php做网站首页,智慧团建网址,广东深圳有什么大学,北京建设信息网站在nodejs中使用WebSocket实现聊天效果#xff08;简易实现#xff09; 安装
npm i ws
实现 创建 server.js /*** 创建一个 WebSocket 服务器#xff0c;监听指定端口#xff0c;并处理客户端连接和消息。** param {Object} WebSocket - 引入的 WebSocket 模块#xff0c… 在nodejs中使用WebSocket实现聊天效果简易实现 安装
npm i ws
实现 创建 server.js /*** 创建一个 WebSocket 服务器监听指定端口并处理客户端连接和消息。** param {Object} WebSocket - 引入的 WebSocket 模块用于创建 WebSocket 服务器。** 功能步骤* 1. 创建一个 WebSocket 服务器监听端口 1024。* 2. 维护一个消息列表 list用于存储客户端发送的消息。* 3. 当客户端发送消息时解析消息内容并将其添加到消息列表中。* 4. 将更新后的消息列表发送回客户端。*/const WebSocket require(ws)// 消息列表用于存储所有客户端发送的消息
let list []// 创建 WebSocket 服务器监听端口 1024
const wss new WebSocket.Server({port: 1024},() {console.log(Server is listening on port 1024)}
)// 监听客户端连接事件
wss.on(connection, function (ws) {// 监听客户端发送的消息事件ws.on(message, function (msg) {// console.log(收到客户端消息, JSON.parse(msg))try {// 解析客户端发送的消息if (msg) {// 如果消息没有错误将消息内容添加到消息列表中list.push(JSON.parse(msg).netName 说: JSON.parse(msg).msg)}} catch (error) {}// 将更新后的消息列表发送回客户端ws.send(JSON.stringify(list))})
})创建 client.js 测试 /*** 创建一个WebSocket客户端用于连接指定的WebSocket服务器。** 参数:* - ws://192.168.8.183:1024: WebSocket服务器的URL地址。*/
const WebSocket require(ws)const ws new WebSocket(ws://192.168.8.183:1024)// 当WebSocket连接成功打开时触发
ws.on(open, function () {console.log(Client is listening on port 1024) // 打印日志表示客户端已成功连接到服务器ws.send(JSON.stringify(Hello World)) // 向服务器发送消息
})// 当接收到服务器发送的消息时触发
ws.on(message, function (msg) {console.log(收到服务器消息, JSON.parse(msg))// ws.send(msg) // 将接收到的消息原样返回给服务器
})// 当WebSocket连接关闭时触发
ws.on(close, function () {console.log(Client close) // 打印日志表示客户端连接已关闭
})分别运行以上两个文件如果互相能收到消息表示服务运行正常 创建 index.html 文件 !DOCTYPE html
html langzhheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titleWebSocket 消息发送/titlestyle/* 消息输入框样式 */#text {width: 350px;height: 30px;}/* 用户名输入框样式 */#netName {width: 150px;height: 30px;}/style/headbody!-- 消息显示区域 --textarea idmsg cols80 rows30 readonly/textareabr /!-- 用户名输入框 --input idnetName typetext placeholder名称 /!-- 消息输入框 --input idtext typetext placeholder消息 /!-- 发送按钮 --button idsendButton发送/buttonscriptlet ws null // WebSocket 连接对象/*** 初始化 WebSocket 连接*/function initWebSocket() {if (ws) return // 避免重复连接ws new WebSocket(ws://192.168.8.183:1024)ws.onopen () {console.log(WebSocket 连接已建立)}ws.onmessage (evt) {try {const receivedData JSON.parse(evt.data)msg.value Array.isArray(receivedData) ? receivedData.join(\n) : JSON.stringify(receivedData, null, 2)} catch (error) {console.error(解析接收到的数据失败:, error)}}ws.onerror (error) {console.error(WebSocket 错误:, error)}ws.onclose () {console.log(WebSocket 连接已关闭尝试重新连接...)ws nullsetTimeout(initWebSocket, 5000) // 5 秒后重连}setInterval(() {ws.send()}, 1000)}/*** 发送消息到 WebSocket 服务器* param {Object} data - 要发送的数据对象*/function sendMessage(data) {if (!ws || ws.readyState ! WebSocket.OPEN) {console.warn(WebSocket 未打开尝试重新连接...)initWebSocket()return}if (!data) {data { err: 1 }} else if (typeof data ! object || Array.isArray(data)) {console.error(数据格式无效)return}ws.send(JSON.stringify(data))}/*** 处理发送按钮点击或回车键事件*/function handleSend() {const netNameValue netName.value.trim()const textValue text.value.trim()if (!netNameValue || !textValue) {alert(用户名和消息不能为空)return}const message {netName: netNameValue,msg: textValue}sendMessage(message)text.value // 清空消息输入框}// 初始化 WebSocket 连接initWebSocket()// 绑定发送按钮点击事件document.getElementById(sendButton).addEventListener(click, handleSend)// 监听回车键事件document.addEventListener(keyup, (e) {if (e.key Enter) {handleSend()}})/script/body
/html用两个浏览器打开此文件就可以互相发送消息 静态文件服务 或者创建一个 static.js 静态服务访问 index.html // static.jsconst express require(express)
const app express()
const path require(path)app.use(/main, express.static(path.join(__dirname, index.html))) // 设置静态文件夹// 端口号不能与socket监听的端口号一样
app.listen(2048, () {console.log(static 2048 Server Start~)
})启动服务 node static.js 访问 http://127.0.0.1:2048/main 以上所有文件放在同一目录
