用uniapp 及socket.io做一个简单聊天app 2

在这里只有群聊，二个好友聊天，可以认为是建了一个二人的群聊。

const express = require('express'); const http = require('http'); const socketIo = require('socket.io'); const cors = require('cors'); // 引入 cors 中间件  const app = express(); const server = http.createServer(app); const io = socketIo(server, {   cors: {     origin: "*", // 允许所有来源     methods: ["GET", "POST"]   } });  // 使用 cors 中间件 app.use(cors());  const port = 3000; const groups = {};  io.on('connection', (socket) => {   console.log('New user connected');    // 用户加入群组   socket.on('joinGroup', ({ groupName, userName }) => {     socket.join(groupName);     groups[socket.id] = { groupName, userName };     socket.to(groupName).emit('message', `${userName} has joined the group`);     console.log(`${userName} joined group ${groupName}`);   });    // 发送消息   socket.on('sendMessage', ({ groupName, message, userName }) => {     io.to(groupName).emit('message', `${userName}: ${message}`);     console.log(`Message sent to ${groupName}: ${userName}: ${message}`);   });    // 踢人   socket.on('kickUser', ({ groupName, userName }) => {     for (let id in groups) {       if (groups[id].userName === userName && groups[id].groupName === groupName) {         io.sockets.sockets.get(id).leave(groupName);         io.to(groupName).emit('message', `${userName} has been kicked from the group`);         console.log(`${userName} was kicked from group ${groupName}`);         break;       }     }   });    // 用户断开连接   socket.on('disconnect', () => {     if (groups[socket.id]) {       const { groupName, userName } = groups[socket.id];       socket.to(groupName).emit('message', `${userName} has left the group`);       delete groups[socket.id];       console.log(`${userName} left group ${groupName}`);     }   }); });  server.listen(port, () => {   console.log(`Server running on port ${port}`); });   

uniapp的界面

<template>   <view class="container">     <view>       <input v-model="userName" placeholder="用户名"/>       <input v-model="groupName" placeholder="群名"/>       <button @click="joinGroup">加入群</button>       <button @click="kickUser">踢人</button>     </view>     <view>       <view id="messages">         <view v-for="(msg, index) in messages" :key="index">{{ msg }}</view>       </view>       <input v-model="message" placeholder="输入聊天"/>       <button @click="sendMessage">聊天</button>     </view>   </view> </template>  <script> import io from 'socket.io-client';  export default {   data() {     return {       socket: null,       userName: 'wanghaibin',       groupName: 'wanghaibin',       message: '',       messages: []     };   },   onLoad() {     this.socket = io('http://127.0.0.1:3000');     this.socket.on('message', (msg) => {       this.messages.push(msg);     });   },   methods: {     joinGroup() {       this.socket.emit('joinGroup', { groupName: this.groupName, userName: this.userName });     },     sendMessage() {       if (this.message.trim() !== '') {         this.socket.emit('sendMessage', { groupName: this.groupName, message: this.message, userName: this.userName });         this.message = '';       }     },     kickUser() {       const userNameToKick = prompt('Enter the username to kick:');       this.socket.emit('kickUser', { groupName: this.groupName, userName: userNameToKick });     }   } }; </script>  <style> .container {   padding: 20px; } #messages {   height: 300px;   overflow-y: scroll;   border: 1px solid #ccc;   margin-bottom: 10px; } input {   display: block;   margin: 10px 0; } button {   display: block;   margin: 10px 0; } </style>   

运行效果：