Websocket整合实现聊天操作

在实际开发中，尤其是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