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>