Socket.io教程: 多聊天室(分组)的简单设计与实现(前端通过调用后端方法加入分组,可加入多个组)

 

后端设计

/**
 * 服务器端向不同的组发送消息
 */
const express = require('express');
var url = require('url');
const http = require('http');
const socketIO = require('socket.io');
const app = express();
const server = http.createServer(app);

  const io = socketIO(server,{
    cors: {
        origin: '*'
    }
});

 server.listen(24000, () => {
     console.log('server running at 127.0.0.1:24000');
 });
  
 app.use(express.static('./public'));
  
 /*     socket.io 逻辑     */
  
 io.on('connection', (socket) => {
     socket.on('addgroup1', () => {
         socket.join('group1');
     });
     socket.on('addgroup2', () => {
         socket.join('group2');
     });
     socket.on('sendMsg', (data) => {
         data.id = socket.id;
         io.emit('receiveMsg', data);
     });
     socket.on('sendToOurGroup', (data) => {
         data.id = socket.id;
         for (const room of socket.rooms) {            
            if (room !== socket.id) {
              socket.to(room).emit("receiveMsg", data);
            }
          }
     })
 });

　　

前端设计

<template>
  <div style="float: left; width: 30%">
    <button @click="group1">Group1</button>
    <button @click="group2">Group2</button>
    <hr />
    群聊<input type="text" id="inputArea" />
    <button id="sendmsg" @click="sendMsgToServer">发送</button>
    <button id="sendtoourgroup" @click="sendMsgToGroupServer">
      发给本组用户
    </button>
    <div style="float: left; width: 65%" id="chatbox"></div>
  </div>
</template>

<script>
import io from "socket.io-client";
let socket = io.connect("http://127.0.0.1:24000");
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  methods: {
    group1() {
      socket.emit("addgroup1");
    },
    group2() {
      socket.emit("addgroup2");
    },
    sendMsgToServer() {
      let data = { msg: document.getElementById("inputArea").value };
      socket.emit("sendMsg", data);
    },
    sendMsgToGroupServer() {
      let data = { msg: document.getElementById("inputArea").value };
      socket.emit("sendToOurGroup", data);
    },
  },
  created() {
    socket.on("receiveMsg", (data) => {
      console.log(data);
      let chatBox = document.getElementById("chatbox");
      let div = document.createElement("div");
      div.innerHTML = `${data.id}: ${data.msg}`;
      chatBox.appendChild(div);
    });
  },
};
</script>

 

相关说明

后端增加组方法的好处是一个Socket可以添加到多个组，可以是接收多个组的消息。能够满足更多需求
不同客户端调用服务器端不同的方法，加入groupid即可实现分组, 分组内的通信是同步的，分组之间互不干扰(调用服务器端方法可以加入很多分组)
socket.join(groupid); 加入分组

socket.rooms 包含socket.id和groupid集合

 socket.to(room).emit("receiveMsg", data);通知socket.id内包含所有groupid组别

socket.join()

socket.leave()

一个负责添加用户，一个负责删除。

socket.to负责找到该组别

私聊：

私聊其实就是找到该用户的socket然后触发socket就行。所以有两个方法：

1. 直接将所有用户的socket保存到一个数组中，以用户名为键，要发给谁直接从数组中找。

2. 还是以用户名为键，但是以socket.id为值，找到id后，再通过id找到该socket。

我们使用第二种方法，第一种比较浪费资源。 

第二种方法实际上也是socket.to(id)这个api发送的，具体就不在详细写了，大家那么聪明，看了分组之后一定能够举一反三吧。

 

项目已经上传至github https://github.com/neuqzxy/chat 其中socket是该博客的文件夹，还有两个文件夹，chat文件夹是 《聊天室入门实战》系列的文件夹

原文链接：https://blog.csdn.net/neuq_zxy/category_7081297.html   我在此基础上修改html为Vue页面供大家参考