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（自动重连）逻辑，监听连接关闭事件，并在适当时重连。
• 根据需要可以增加更多的错误处理和状态管理功能，以提升用户体验和稳定性。

标签： 来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。