Websocket使用——以uniapp为例

实现app的websocket初始化，心跳发送消息，断线重连
使用uniapp提供的方法，js代码实现如下
特别注意，参数需要使用encodeURIComponent转码一下，不然ios会有onOpen监听不到的情况，原因是token可能有空格，没有处理。直接拼在url上，然后Android，H5都可以识别，就苹果底层估计直接给拦截掉了

const WsUrl = "ws://127.0.0.1:8001"
export var socket = null
export function StartWebsocket(token = uni.getStorageSync('token')) {
    return new Promise((resolve, reject) => {
        if (!socket && token) {
            socket = uni.connectSocket({
                url: WsUrl + '?token=' + encodeURIComponent(token),
                complete: () => { }
            });
            socket.onOpen((res) => {
                handleSocketOpen()
                resolve(1)
            })
            socket.onError((error) => {
                handleSocketError(error)
                resolve(1)
            })
            socket.onClose((res) => {
                handleSocketClose()
                resolve(1)
            })
            socket.onMessage((res) => {
                console.log('收到服务器内容：' + res);
            })
        } else {
            resolve(1)
        }
    })
    // uni.onSocketOpen(function (res) {
    // 	handleSocketOpen()
    // });
    // uni.onSocketError(function (error) {
    // 	handleSocketError(error)
    // });
    // uni.onSocketClose(function (res) {
    // 	handleSocketClose()
    // 	console.log('WebSocket 已关闭！');
    // });
    // uni.onSocketMessage(function (res) {
    // 	getMessage(res)
    // });
}
// 监听WebSocket连接打开事件
function handleSocketOpen() {
    console.log('WebSocket连接已打开');
    startHeartbeat(); // 连接成功后开启心跳定时器
}
// 开启心跳定时器
let heartbeatTimer = null; // 心跳定时器
function startHeartbeat() {
    heartbeatTimer = setInterval(() => {
        sendHeartbeat();
    }, 3000); // 每3秒发送一次心跳消息
}
// 发送心跳消息
function sendHeartbeat() {
    uni.sendSocketMessage({
        data: "heartbeat"
    });
}
//关闭websocket
export function CloseWebsocket() {
    console.log("关闭websocket");
    if (socket) {
        socket.close();
    }
}
// 监听WebSocket连接关闭事件
function handleSocketClose() {
    console.log('WebSocket连接已关闭');
    socket = null
    clearInterval(heartbeatTimer); // 连接关闭时清除心跳定时器
}
// 监听WebSocket连接错误事件
function handleSocketError(error) {
    console.log('WebSocket连接出错');
    if (socket) {
        socket.close();
        socket = null
        clearInterval(heartbeatTimer);
    }
    setTimeout(() => {
        console.log("WebSocket尝试重新连接");
        StartWebsocket();
    }, 3000);
}

使用原生的方法，原生方法app无法使用，js代码实现如下

const WsUrl = "ws://127.0.0.1:8001"
export var socket = null
export function StartWebsocket(token = uni.getStorageSync('token')) {
    return new Promise((resolve, reject) => {
        if (!socket && token) {
            socket = new WebSocket(WsUrl)
            socket.addEventListener('open', handleSocketOpen);
            socket.addEventListener('message', handleSocketMessage);
            socket.addEventListener('close', handleSocketClose);
            socket.addEventListener('error', handleSocketError);
        } else {
            resolve(1)
        }
    })
}
// 监听WebSocket连接打开事件
function handleSocketOpen() {
    console.log('WebSocket连接已打开');
    startHeartbeat(); // 连接成功后开启心跳定时器
}
// 开启心跳定时器
let heartbeatTimer = null; // 心跳定时器
function startHeartbeat() {
    heartbeatTimer = setInterval(() => {
        sendHeartbeat();
    }, 3000); // 每3秒发送一次心跳消息
}
// 发送心跳消息
function sendHeartbeat() {
    socket.send({
        data: "heartbeat"
    });
}
// 监听WebSocket消息接收事件
function handleSocketMessage(event) {
    console.log("收到消息",event);
}
//关闭websocket
export function CloseWebsocket() {
    console.log("关闭websocket");
    if (socket) {
        socket.close();
    }
}
// 监听WebSocket连接关闭事件
function handleSocketClose() {
    console.log('WebSocket连接已关闭');
    socket = null
    clearInterval(heartbeatTimer); // 连接关闭时清除心跳定时器
}
// 监听WebSocket连接错误事件
function handleSocketError(error) {
    console.log('WebSocket连接出错');
    if (socket) {
        socket.close();
        socket = null
        clearInterval(heartbeatTimer);
    }
    setTimeout(() => {
        console.log("WebSocket尝试重新连接");
        StartWebsocket();
    }, 3000);
}

使用方法

<script setup>
import {
	onShow,
	onHide
} from '@dcloudio/uni-app'
import { StartWebsocket, CloseWebsocket } from './websocket'
onShow(() => {
	StartWebsocket()
})
onHide(() => {
	console.log('App Hide')
	CloseWebsocket()
})
</script>