首先我们考虑即时通讯,肯定是双人或者多人聊天,如果你要做单一的,比如当用户下单,立即通知商家(当然有的商家做完商品之后也会通知用户),以下是我探讨的几个点。
- uniapp中构建ws
- Node中构建ws
uniapp中构建ws
1.构建ws,通常我们都会把他赋给一个值
***我需要特别说一下这个接口的后面/1是什么意思,他表示唯一的,也就是说,如果你想让别人给你发送消息,那别人就会通过这个唯一id值来给你发送。***后续在我们发送的时候我们还需要传递一个发给谁的id
uni.connectSocket({ url: 'ws://localhost:8080/1', complete: () => {} });
2.ws中的一些事件
- onOpen :ws已连接
- onMessage : 接收消息
- onError :打开失败
- onClose :已关闭
3.当我们需要发送消息的时候
我们解析以下方法
- 其中data表示传递给接收者的信息,其中包括这个接收者id,也就是我们上面提到的/1
- success表示发送成功
- fail表示发送消息失败
webSocketTask.value.send({
data: messageData,
success: () => {
console.log('消息发送成功');
messages.push({isMine:true,content:inputMessage.value})
inputMessage.value = ''; // 清空输入框
},
fail: () => {
console.error('消息发送失败');
},
});
完整的uniapp代码
<template>
<view class="chat-container">
<scroll-view
class="message-list"
scroll-y="true"
ref="messageList">
<view class="message" v-for="(message, index) in messages" :key="index">
<view class="message-content" :class="{ 'my-message': message.isMine }">
<image src="../../static/icon/我的.png" mode=""></image>
<text>{{ message.content }}</text>
</view>
</view>
</scroll-view>
<view class="input-area">
<input type="text" v-model="inputMessage" placeholder="输入消息" />
<button @click="sendMessage">发送</button>
</view>
</view>
</template>
<script setup>
import { ref, reactive,watch,nextTick } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
const messageList = ref(null);
const messages = reactive([]);
const inputMessage = ref('');
const webSocketTask = ref(null);
const merChantId = ref('')
// 在onLoad生命周期钩子中连接WebSocket
onLoad((option)=>{
// 默认当前用户的id是1
// 获取商家id
merChantId.value=option.merchantid
webSocketTask.value=uni.connectSocket({
url: 'ws://localhost:8080/1',
complete: () => {}
});
// 监听WebSocket连接打开事件
webSocketTask.value.onOpen((res) => {
console.log('WebSocket连接已打开!');
});
webSocketTask.value.onMessage((message) => {
console.log(message);
let data = JSON.parse(message.data)
messages.push({isMine:false,content:data.text})
// const textMessage = JSON.parse(message.data);
// messages.value.push({ id: messages.value.length, text: textMessage.text });
});
webSocketTask.value.onError((err) => {
console.error('WebSocket连接打开失败,请检查!', err);
});
webSocketTask.value.onClose(() => {
console.log('WebSocket 已关闭!');
});
})
const sendMessage = () => {
if (inputMessage.value.trim() === '') return;
const messageData = JSON.stringify({
text: inputMessage.value,
to: merChantId._value, // 接收者的用户ID
});
webSocketTask.value.send({
data: messageData,
success: () => {
console.log('消息发送成功');
messages.push({isMine:true,content:inputMessage.value})
inputMessage.value = ''; // 清空输入框
},
fail: () => {
console.error('消息发送失败');
},
});
// 清空输入框
// 滚动到底部
};
// 用于确保消息列表在新消息到来时自动滚动到底部
</script>
<style scoped lang="scss">
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
}
.message-list {
flex-grow: 1;
padding: 10px;
background-color: #f2f2f2;
overflow-y: scroll;
}
.message {
margin-bottom: 10px;
}
.message-content {
padding: 8px;
background-color: #ffffff;
border-radius: 4px;
image{
width: 50rpx;
height: 50rpx;
border-radius: 50%;
}
}
.my-message {
display: flex;
flex-direction: row-reverse;
margin-left: auto; /* 居右显示 */
background-color: #dcf8c6; /* 自己的消息使用不同颜色 */
}
.input-area {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
display: flex;
padding: 10px;
background-color: #ffffff;
}
input[type="text"] {
flex-grow: 1;
margin-right: 10px;
padding: 10px;
border: 1px solid #cccccc;
border-radius: 4px;
}
button {
white-space: nowrap;
padding: 10px;
background-color: #007aff;
color: white;
border: none;
border-radius: 4px;
}
</style>
2.Node中的ws
- 首先在node中需要安装一下
npm i ws
- 在Node中使用
const WebSocket = require('ws');
const http = require('http');
// 创建HTTP服务器
const server = http.createServer((req, res) => {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('WebSocket Server\n');
});
// 创建WebSocket服务器
const wss = new WebSocket.Server({ server });
// 用户列表,用于存储用户连接和相关信息
const users = {};
wss.on('connection', (ws, req) => {
const userId = req.url.substring(1); // 假设用户ID通过URL传递,如 ws://example.com/userId
users[userId] = ws;
ws.on('message', (message) => {
console.log(`Received message from ${userId}: ${message}`);
// 这里可以根据消息格式进行解析,找到接收方的ID
// 假设消息是一个JSON字符串,包含发送者和接收者ID以及实际消息内容
const msg = JSON.parse(message);
const recipientId = msg.to;
if (users[recipientId]) {
if (Buffer.isBuffer(message)) {
// 处理二进制数据
const text = message.toString('utf8');
console.log('Received binary data:', text);
users[recipientId].send(text);
} else {
console.log('Received message:', message);
// 处理文本消息
users[recipientId].send(message);
}
// 如果接收者在线,则直接发送消息
} else {
// 如果接收者不在线,可以在这里处理离线消息逻辑
// ...
}
});
ws.on('close', () => {
console.log(`Connection with ${userId} closed`);
delete users[userId];
});
});
server.listen(8080, () => {
console.log('WebSocket server started on ws://localhost:8080');
});
需要注意的几个点const wss = new WebSocket.Server({ port: 8082 });
这里的port是端口号。