在实际开发中,尤其是web开发,我该如何做才可以实现消息或者数据的实时更新呢。
这里我为大家介绍,websocket长连接,它可以简历连接,且创建一个通道,通道中的数据可以实时更新。
废话不多说,接下来我将使用vue+springboot基于websocket来实现一个简单的聊天实现。
vue前端代码,这里主要的功能就是连接后端websocket服务器,然后发送消息。
<script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
const messageCe = ref('');
const receivedMessages = ref([]);
const HEART_CHECK_TIME = 30000;
const data = reactive({
readyLine: 0,
onLine: 0,
outLine: 0,
errLine: 0,
});
const userId = 1;
const wsuri = `ws://localhost:8080/websocket/${userId}`;
let ws = new WebSocket(wsuri);
const heartCheck = createHeartCheck(ws, { userId });
onMounted(() => {
ws.onopen = () => {
ws.send(JSON.stringify({ test: "12345连接无误", toUserId: userId }));
};
ws.onerror = () => {
reconnect();
};
ws.onmessage = (event) => {
handleMessage(event.data);
heartCheck();
};
ws.onclose = () => {
console.log("已经关闭连接");
};
});
onBeforeUnmount(() => {
ws.close();
});
const sendMessage = () => {
if (messageCe.value.trim() === '') return; // 防止发送空消息
const data_mm = JSON.stringify({ message: messageCe.value }); // 将输入消息序列化
ws.send(data_mm);
messageCe.value = ''; // 清空输入框
};
function handleMessage(data) {
try {
const obj = JSON.parse(data);
if (obj.message) {
// 记录所有接收到的消息
receivedMessages.value.push(`${obj.username || '匿名'}: ${obj.message}`);
}
} catch (e) {
console.error('JSON字符串格式错误:', e);
}
}
function reconnect() {
console.log("尝试重新连接...");
setTimeout(() => {
ws = new WebSocket(wsuri);
}, 3000);
}
function createHeartCheck(ws, { userId }) {
let timer = null;
let timeoutTimer = null;
return () => {
clearTimeout(timer);
clearTimeout(timeoutTimer);
timer = setTimeout(() => {
const message = JSON.st