用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 = { 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.userName === userName && groups.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) {
const { groupName, userName } = groups;
socket.to(groupName).emit('message', `${userName} has left the group`);
delete groups;
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>
运行结果：https://i-blog.csdnimg.cn/direct/566d27c7b1a04a549bc95fe8c31c8041.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]