websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果。

这里的使用没有使用socket.io官方提供的namespaceroom,而是完全通过一个namespace实现的。数据传输使用JSON格式,封装了消息规范

消息体规范

  1. const actionType = {
  2. join:'JOIN',//加入
  3. leave:'LEAVE',//离开
  4. talk:'TALK',//消息
  5. action:'ACTION',//用户操作
  6. push:'PUSH'//系统推送
  7. }//消息体
  8. class MSG {
  9. constructor(type,body){
  10. this.type = type;
  11. this.body= body;
  12. }
    }复制代码

安装使用

  1. npm install socket.io-rooms --save

demo演示

把项目从github上clone下来后,执行npm start,然后打开example/index.html即可品尝到演示效果

使用方式

服务端Server

  1. const {User,Rooms} = require('./index')
  2. const server = require('http').createServer();
  3. const io = require('socket.io')(server);
  4.  
  5. //大厅
  6. io.on('connection', client => {
  7. let user = new User();
  8. client.emit('user',user);
  9. client.on('join', data => {
  10. /* 加入某个房间 */
  11. Rooms.join(data,user,io,client)
  12. });
  13. client.on('message',msg=>{
  14. if(user.roomId){
  15. // io.to(user.roomId).emit('message',msg)
  16. if(msg.type == 'update'){
  17. user.update(msg.body);
  18. }
  19. msg.user = user.uid;
  20. Rooms.send(user.roomId,msg)
  21. }else{
  22. io.emit('message',msg)
  23. }
  24. console.log(msg)
  25. })
  26. client.on('disconnect', () => {
  27. /* … */
  28. console.log("连接断开")
  29. Rooms.leave(user)
  30. });
  31. });
  32. server.listen();
这里传输统一使用`JSON`格式,消息`title`也以`message`为主,这里端口写的80,你可以使用其他端口,如果你是Express,也可以共用80端口。

客户端调用Client

  1. const socket = io('http://localhost');
  2. log =(...args)=>{
  3. document.getElementById('log').innerHTML +='<br/>'+args.map(item=>JSON.stringify(item)).join(' ')+'=>'+(+new Date());
  4. }
  5.  
  6. log(socket.id)
  7. let user ={},room,client;
  8. socket.on('connect', (c) => {
  9. log('connect ...', socket.id);
  10. socket.on('user',u=>{
  11. user = u;
  12. log('用户ID',u.uid)
  13. });
  14. });
  15. socket.on('message',msg=>{
  16. log('message:',msg)
  17. });
  18. function joinroom(num){
  19. //加入房间号为1的房间
  20. socket.emit('join',num);
  21. }
  22. function send(){
  23. let msg = document.getElementById('msg').value;
  24. socket.emit('message',{type:'TALK',body:msg})
  25. // setInterval(function(){
  26. // socket.emit('message',{type:'TALK',body:+new Date()})
  27. // },2000)
  28. }

在用户信息上,为了增加扩展性,添加了update的操作类型进行同步用户信息,这在实际中很有用。

代码很简单,就是两个类的实现, RoomsUser类,这里没有限定房间的数量,可以在初始化的时候先固定房间名和数量。源码托管于github,地址为:github.com/tianxiangbi… ,如果觉得有用,加颗小星星吧

websocket的实现有很多种,像ws和socket.io,这里使用的是socket.io来实现多房间的效果。

这里的使用没有使用socket.io官方提供的namespaceroom,而是完全通过一个namespace实现的。数据传输使用JSON格式,封装了消息规范

消息体规范

  1. const actionType = {
  2. join:'JOIN',//加入
  3. leave:'LEAVE',//离开
  4. talk:'TALK',//消息
  5. action:'ACTION',//用户操作
  6. push:'PUSH'//系统推送
  7. }//消息体
  8. class MSG {
  9. constructor(type,body){
  10. this.type = type;
  11. this.body= body;
  12. }}

安装使用

  1. npm install socket.io-rooms --save

demo演示

把项目从github上clone下来后,执行npm start,然后打开example/index.html即可品尝到演示效果

使用方式

服务端Server

  1. const {User,Rooms} = require('socket.io-rooms')
  2. const server = require('http').createServer();
  3. const io = require('socket.io')(server);
  4. //大厅
  5. io.on('connection', client => {
  6. let user = new User();
  7. client.emit('user',user);
  8. client.on('join', data => {
  9. /* 加入某个房间 */
  10. Rooms.join(data,user,io,client)
  11. });
  12. client.on('message',msg=>{
  13. if(user.roomId){
  14. // io.to(user.roomId).emit('message',msg)
  15. if(msg.type == 'update'){
  16. user.update(msg.body);
  17. }
  18. msg.user = user.uid;
  19. Rooms.send(user.roomId,msg)
  20. }else{
  21. io.emit('message',msg)
  22. }
  23. console.log(msg)
  24. })
  25. client.on('disconnect', () => {
  26. /* … */
  27. console.log("连接断开")
  28. Rooms.leave(user)
  29. });
  30. });
  31. server.listen(80);
这里传输统一使用`JSON`格式,消息`title`也以`message`为主,这里端口写的80,你可以使用其他端口,如果你是Express,也可以共用80端口。

客户端调用Client

  1. const socket = io('http://localhost');
  2. log =(...args)=>{
  3. document.getElementById('log').innerHTML +='<br/>'+args.map(item=>JSON.stringify(item)).join(' ')+'=>'+(+new Date());
  4. }
  5. log(socket.id)
  6. let user ={},room,client;
  7. socket.on('connect', (c) => {
  8. log('connect ...', socket.id);
  9. socket.on('user',u=>{
  10. user = u;log('用户ID',u.uid)
  11. });
  12. });
  13. socket.on('message',msg=>{
  14. log('message:',msg)
  15. });
  16. function joinroom(num){
  17. //加入房间号为1的房间
  18. socket.emit('join',num);
  19. }
  20. function send(){
  21. let msg = document.getElementById('msg').value;
  22. socket.emit('message',{type:'TALK',body:msg})
  23.  
  24. setInterval(function(){
  25. socket.emit('message',{type:'TALK',body:+new Date()})
  26. },2000)
  27. }

在用户信息上,为了增加扩展性,添加了update的操作类型进行同步用户信息,这在实际中很有用。

代码很简单,就是两个类的实现, RoomsUser类,这里没有限定房间的数量,可以在初始化的时候先固定房间名和数量。源码托管于github,地址为:https://github.com/tianxiangbing/rooms ,如果觉得有用,加颗小星星吧

使用socket.io实现多房间通信聊天室的更多相关文章

  1. 9、socket.io,websocket 前后端实时通信,(聊天室的实现)

    websocket 一种通信协议 ajax/jsonp 单工通信 websocket 全双工通信 性能高 速度快 2种方式: 1.前端的websocket 2.后端的 socket.io 一.后端so ...

  2. 使用node.js + socket.io + redis实现基本的聊天室场景

    在这篇文章Redis数据库及其基本操作中介绍了Redis及redis-cli的基本操作. 其中的publish-subscribe机制应用比较广泛, 那么接下来使用nodejs来实现该机制. 本文是对 ...

  3. 与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室

    原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  4. 与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室

    原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  5. vue.js+socket.io+express+mongodb打造在线聊天

    vue.js+socket.io+express+mongodb打造在线聊天 在线地址观看 http://www.chenleiming.com github地址 https://github.com ...

  6. vue.js+socket.io+express+mongodb打造在线聊天[二]

    vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...

  7. java 用socket制作一个简易多人聊天室

    代码: 服务器端Server import java.io.*; import java.net.*; import java.util.ArrayList; public class Server{ ...

  8. Android进阶(十五)socket通信——聊天室

    想做一个聊天室,花费了将近一天的时间,各种错误.讲解知识点之前,絮叨几句:动手能力还是很重要的,有时看似简单的一个问题,当你真正着手去解决的时候就有可能会遇到各种各样的问题,原因之一就是因为你的知识储 ...

  9. nodejs构建多房间简易聊天室

    1.前端界面代码 前端不是重点,够用就行,下面是前端界面,具体代码可到github下载. 2.服务器端搭建 本服务器需要提供两个功能:http服务和websocket服务,由于node的事件驱动机制, ...

随机推荐

  1. Linux进程状态详解及状态转换

        学而不思则罔,思而不学则殆.    Linux下,进程状态有五种 : 运行态,可中断睡眠态,不可中断睡眠态,停止态和追踪态 运行态表示进程可执行或者正在执行, 可中断睡眠态表示进程被阻塞,等条 ...

  2. hadoop 异常

    2019-09-20 22:49:51,955 WARN org.apache.hadoop.hdfs.server.datanode.DataNode: Problem connecting to ...

  3. proxy_banner

  4. [洛谷P5367]【模板】康托展开

    题目大意:给定一个$n$的排列,求它在$n$的全排列中的名次 题解:康托展开,对于一个全排列,第$i$为有$n+1-i$种选择,用变进制数表示,这一位就是$n+1-i$进制.记排列中第$[1,i)$中 ...

  5. Luogu3214 HNOI2011 卡农 组合、DP

    传送门 火题qwq 我们需要求的是满足元素个数为\(M\).元素取值范围为\([1,2^n-1]\).元素异或和为\(0\)的集合的数量. 首先我们可以计算元素有序的方案数(即计算满足这些条件的序列的 ...

  6. 论文笔记 Large Pose 3D Face Reconstruction from a Single Image via Direct Volumetric CNN Regression

    Large Pose 3D Face Reconstruction from a Single Image via Direct Volumetric CNN Regression 该文献采用一个新型 ...

  7. Python3 MySQL

    首先安装pymysql  pip install pymysql 准备数据库:创建一个数据库testdb mysql实例: import pymysql #打开数据库连接,使用数据库所在的IP127. ...

  8. 微信小程序零基础制作指南

    第一步 准备工作 下载腾讯官方的微信web开发工具并且安装 第二步 登录已经注册小程序的微信账号并且选择合适的路径新建小程序项目. 新建一个页面文件夹,每一个页面需要一个文件夹,里面包括写逻辑脚本的j ...

  9. 在iMac上建立一个git仓库

    前沿:一般我们去git clone 的时候,数据直接指向了某某分支的最后一次提交.想想 我们每次提交的不同点都在哪,去 当前工程文件下找到 .git 文件夹,去下面自己看看吧 - .git - .co ...

  10. Python学习笔记【1】

    1.%r和%s的区别 (1)stackflow 上面的一个解答 (2) x = "There are %d types of people." %10 binary = " ...