在这里只有群聊,二个挚友谈天,可以以为是建了一个二人的群聊。
- 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>
复制代码 运行结果:
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |