在 uni-app 中怎么实现 WebSocket 的连接、消息发送和接收？

1. 创建 WebSocket 服务

首先，可以创建一个 WebSocket 服务，以集中管理连接和消息的发送与接收。

// services/websocket.js

let socket = null;

export const connectWebSocket = (url) => {
    return new Promise((resolve, reject) => {
        socket = uni.connectSocket({
            url,
            protocol: ['protocol1', 'protocol2'], // 根据需要选择协议
        });

        socket.onOpen((res) => {
            console.log('WebSocket 连接已打开！', res);
            resolve(socket);
        });

        socket.onError((res) => {
            console.error('WebSocket 连接失败，请检查！', res);
            reject(res);
        });
    });
};

export const sendMessage = (message) => {
    if (socket && socket.readyState === WebSocket.OPEN) {
        socket.send({
            data: JSON.stringify(message),
            success: () => {
                console.log('消息发送成功');
            },
            fail: (error) => {
                console.error('消息发送失败', error);
            }
        });
    } else {
        console.error('WebSocket 尚未连接，无法发送消息');
    }
};

export const onMessageReceived = (callback) => {
    if (socket) {
        socket.onMessage((res) => {
            console.log('收到服务器内容：', res.data);
            callback(JSON.parse(res.data)); // 处理接收到的消息
        });
    } else {
        console.error('WebSocket 尚未连接，无法接收消息');
    }
};

export const closeWebSocket = () => {
    if (socket) {
        socket.close({
            success: () => {
                console.log('WebSocket 连接已关闭');
            },
            fail: (error) => {
                console.error('关闭 WebSocket 连接失败', error);
            }
        });
    }
};

2. 使用 WebSocket 服务

在组件中可以使用这个 WebSocket 服务来连接和发送消息。例如：

<template>
    <view>
        <button @click="connect">连接 WebSocket</button>
        <button @click="sendTestMessage">发送测试消息</button>
    </view>
</template>

<script>
import { connectWebSocket, sendMessage, onMessageReceived, closeWebSocket } from '@/services/websocket.js'; // 根据实际路径引入

export default {
    methods: {
        connect() {
            const url = 'wss://your-websocket-url/service/web/acc/api/v1/acc'; // 替换为您的 WebSocket 服务器地址
            connectWebSocket(url)
                .then(() => {
                    console.log('WebSocket 连接成功');
                    // 设置消息接收的回调
                    onMessageReceived((data) => {
                        console.log('接收到消息:', data);
                    });
                })
                .catch((error) => {
                    console.error('连接失败:', error);
                });
        },
        sendTestMessage() {
            const message = { type: 'test', content: 'Hello WebSocket!' };
            sendMessage(message);
        },
    },
    beforeDestroy() {
        closeWebSocket(); // 组件销毁时关闭 WebSocket 连接
    }
}
</script>

<style>
/* 样式部分 */
</style>

3. 重点说明

• 连接 WebSocket：通过 connectWebSocket 方法建立连接，并设置连接成功和失败的回调。
• 消息发送：通过 sendMessage 方法发送消息，确保 WebSocket 已连接。
• 消息接收：使用 onMessageReceived 方法设置处理接收到消息的回调。
• 关闭连接：在组件销毁时调用 closeWebSocket 方法关闭连接，避免在不再需要时保持连接。

4. 注意事项

• 确保服务器支持 WebSocket 协议，并且 URL 正确。
• 在实际应用中，可能还需要处理 reconnect（自动重连）逻辑，监听连接关闭事件，并在适当时重连。
• 根据需要可以增加更多的错误处理和状态管理功能，以提升用户体验和稳定性。

标签：
来源：