用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>

运行效果：