Socket.io教程: 基于Express的多聊天室(分组)的简单设计与实现(前端通过传参来自动分组)
多聊天室(多个分组)的简单设计概述
相当于实现多个群聊的功能
每个群之间互相不干扰
后端设计
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | var express = require( 'express' ); var url = require( 'url' ); var app = express(); var server = require( 'http' ).Server(app); var io = require( 'socket.io' )(server); app. set ( 'view engine' , 'ejs' ); app.use(express. static ( 'public' )); app. get ( '/' ,function(req,res){ res.render( 'index' ); }) server.listen(3000, '127.0.0.1' ); io. on ( 'connection' , function (socket) { // console.log('socket配置成功') // 获取客户端建立连接的时候传入的值 //console.log(socket.request.url); var groupid = url.parse(socket.request.url, true ).query.groupid; // 获取分组号 //console.log(groupid); socket. join (groupid); // 加入分组 // 监听客户端发送的事件 socket. on ( 'clientMsg' ,function(data){ //console.log(data) // 广播给指定分组的用户 发送消息 两种方式 // io.to(groupid).emit('serverMsg','Server Ok'); // 通知分组内的所有用户 包括自己 socket.broadcast.to(groupid).emit( 'serverMsg' , 'Server Ok' ); // 通知分组内的用户不包括自己 }) }); |
前端设计
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script src= "http://127.0.0.1:3000/socket.io/socket.io.js" ></script> <input type= "button" value= "发送消息" onclick= "sendMsg()" > <script type= "text/javascript" > // 和服务器建立长连接 多个分组传入不同groupid即可实现不同的分组 var socket = io.connect( 'http://127.0.0.1:3000?groupid=1' ); // 接收服务器返回的信息 socket. on ( 'serverMsg' ,function(data) { console.log(data); }); function sendMsg() { socket.emit( 'clientMsg' , 'clientMsg' ); } </script> |
相关说明
不同客户端建立连接时传入不同的groupid即可实现分组, 分组内的通信是同步的,分组之间互不干扰(即前端通过传参来自动分组)
socket.join(groupid); 加入分组
io.to(groupid).emit(‘serverMsg’,‘Server Ok’); 通知分组内的所有用户 包括自己
socket.broadcast.to(groupid).emit(‘serverMsg’,‘Server Ok’); 通知分组内的用户不包括自己
————————————————
版权声明:本文为CSDN博主「Johnny丶me」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/Tyro_java/article/details/106607010
本文来自博客园,作者:王晓升,转载请注明原文链接:https://www.cnblogs.com/xiaosheng1989/p/16478068.html
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南