uniapp小程序连接websocket类封装及调用示例展示

stone scorpion

已于 2023-07-24 11:02:13 修改

阅读量431

点赞数 1

分类专栏：微信小程序文章标签： uni-app 小程序 websocket

于 2023-07-24 10:23:20 首次发布

本文链接：https://blog.csdn.net/weixin_42289292/article/details/131890613

版权

微信小程序专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章展示了如何封装一个WebSocketUtil类，用于处理WebSocket连接、监听消息和发送消息。在Vue3的setup函数中，创建WebSocketUtil实例并设置消息回调，实现在组件挂载和卸载时的连接与关闭。

摘要由CSDN通过智能技术生成

直接上代码：

1、封装类

/** +----------------------------------------------------------------------
 * | HelloCrab [ Best For You ! ]
 * +----------------------------------------------------------------------
 * | Copyright (c) 2022~9999 https://www.hellocrab.cn All rights reserved.
 * +----------------------------------------------------------------------
 * | Licensed 版权归属：HelloCrab
 * +----------------------------------------------------------------------
 * | Author: HelloCrab
 * +----------------------------------------------------------------------
 *                    _ooOoo_
 *                   o8888888o
 *                   88" . "88
 *                   (| -_- |)
 *                    O\ = /O
 *                ____/`---'\____
 *              .   ' \\| |// `.
 *               / \\||| : |||// \
 *             / _||||| -:- |||||- \
 *               | | \\\ - /// | |
 *             | \_| ''\---/'' | |
 *              \ .-\__ `-` ___/-. /
 *           ___`. .' /--.--\ `. . __
 *        ."" '< `.___\_<|>_/___.' >'"".
 *       | | : `- \`.;`\ _ /`;.`/ - ` : | |
 *         \ \ `-. \_ __\ /__ _/ .-` / /
 * ======`-.____`-.___\_____/___.-`____.-'======
 *                    `=---='
 **/

class WebSocketUtil {
    constructor(url) {
        this.url = url
    }

    connect() {
        this.socket = uni.connectSocket({
            url: this.url
        })
    }

    // 监听消息
    onMessage(callback) {
        uni.onSocketMessage((res) => {
            callback(res.data)
        })
    }

    // 发送消息
    send(message) {
        uni.sendSocketMessage({
            data: message
        })
    }

    // 关闭连接
    close() {
        uni.closeSocket()
    }
}

export default WebSocketUtil

2、调用示例：示例场景是 vue3的setup下的写法

import WebSocketUtil from '@/utils/WebSocketUtil'

/*websocket相关字段*/
const webSocketUtil = new WebSocketUtil('wss://your-websocket-url'), receivedMessage = ref('') // 用于显示接收到的消息
// 监听消息
const handleMessage = (message) => {
    receivedMessage.value = message.data
}
/*websocket相关字段*/
onMounted(() => {
    webSocketUtil.connect()
    webSocketUtil.onMessage(handleMessage) // 设置消息回调
})
onBeforeUnmount(()=>{
    webSocketUtil.close()
})