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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值