分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 教程案例

Node + H5 + WebSocket + Koa2 实现简单的多人聊天

发布时间:2023-09-06 01:06责任编辑:董明明关键词:WebNode

服务器代码  ( 依赖于 koa2,  koa-websocket )

/* 实例化外部依赖 */let Koa = require("koa2");let WebSocket = require("koa-websocket");/* 实例化 WebSocket, 实例化储存所有上线文数组 并分配监听的端口 */let app = WebSocket(new Koa());let ctxs = [];app.listen(80);/* 实现简单的接发消息 */app.ws.use((ctx, next) => { ???ctxs.push(ctx); ???ctx.websocket.on("message", (message) => { ???????console.log(message); ???????for(let i = 0; i < ctxs.length; i++) { ???????????if (ctx == ctxs[i]) continue; ???????????ctxs[i].websocket.send(message); ???????} ???});});

前端代码 ( 该页面可同时打开多个进行聊天 )

<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<input type="text" id="content" /> ???<input type="button" value="发送" id="send" /></body><script type="text/javascript"> ???/* 封装 WebSocket 实例化的方法 ?*/ ???var CreateWebSocket = (function () { ???????return function (urlValue) { ???????????if(window.WebSocket) return new WebSocket(urlValue); ???????????if(window.MozWebSocket) return new MozWebSocket(urlValue); ???????????return false; ???????} ???})(); ???/* 实例化 WebSocket 连接对象, 地址为 ws 协议 */ ???var webSocket = CreateWebSocket("ws://localhost"); ???/* 接收到服务端的消息时 */ ???webSocket.onmessage = function (msg) { ???????console.log("服务端说:" + msg.data); ???}; ???/* 关闭时 */ ???webSocket.onclose = function () { ???????console.log("关闭连接"); ???}; ???/* 发送消息 */ ???document.getElementById("send").onclick = function () { ???????var str = document.getElementById("content").value; ???????webSocket.send(str); ???}</script></html>

Node + H5 + WebSocket + Koa2 实现简单的多人聊天

原文地址:http://www.cnblogs.com/lovling/p/7440360.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved