求一个uniapp的WebSocket通讯例子

六度科技

求一个uniapp的WebSocket通讯例子
易语言这边的服务例子我这有
只要uniapp的WebSocket客户Duan即可
要能自定服务器地址
发送和接收的
希望能写的简便
界面无所谓 三个编辑框（地址,发送内容,接收内容） 两个按钮(连接/断开,发送)就行
注释详细一些
100精币 不成敬意,有会的大佬快来拿吧

结局i

封装websocket

[JavaScript] 纯文本查看 复制代码

class websocketUtil {
        constructor(url, time) {
                this.is_open_socket = false //避免重复连接
                this.url = url //地址
                this.data = null
                //心跳检测
                this.timeout= time //多少秒执行检测
                this.heartbeatInterval= null //检测服务器端是否还活着
                this.reconnectTimeOut= null //重连之后多久再次重连

                try {
                        return this.connectSocketInit()
                } catch (e) {
                        console.log('catch');
                        this.is_open_socket = false
                        this.reconnect();
                }
        }

        // 进入这个页面的时候创建websocket连接【整个页面随时使用】
        connectSocketInit() {
                this.socketTask = uni.connectSocket({
                        url: this.url,
                        success:()=>{
                                console.log("正准备建立websocket中...");
                                // 返回实例
                                return this.socketTask
                        },
                });
                this.socketTask.onOpen((res) => {
                        console.log("WebSocket连接正常！");
                        clearTimeout(this.reconnectTimeOut)
                        clearTimeout(this.heartbeatInterval)
                        this.is_open_socket = true;
                        this.start();
                        // 注：只有连接正常打开中 ，才能正常收到消息
                        this.socketTask.onMessage((res) => {
                                console.log(res.data)
                        });
                })
                // 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
                // uni.onSocketError((res) => {
                //         console.log('WebSocket连接打开失败，请检查！');
                //         this.is_open_socket = false;
                //         this.reconnect();
                // });
                // 这里仅是事件监听【如果socket关闭了会执行】
                this.socketTask.onClose(() => {
                        console.log("已经被关闭了")
                        this.is_open_socket = false;
                        this.reconnect();
                })
        }
        
        //发送消息
        send(value){
                // 注：只有连接正常打开中 ，才能正常成功发送消息
                this.socketTask.send({
                        data: value,
                        async success() {
                                console.log("消息发送成功");
                        },
                });
        }
        //开启心跳检测
        start(){
                this.heartbeatInterval = setInterval(()=>{
                        this.data={value:"传输内容",method:"方法名称"}
                        console.log(this.data)
                        this.send(JSON.stringify(this.data));
                },this.timeout)
        }
        //重新连接
        reconnect(){
                //停止发送心跳
                clearInterval(this.heartbeatInterval)
                //如果不是人为关闭的话，进行重连
                if(!this.is_open_socket){
                        this.reconnectTimeOut = setTimeout(()=>{
                                this.connectSocketInit();
                        },3000)
                }
        }
}

module.exports = websocketUtil

调用方式
1.单页面调用
引入

[JavaScript] 纯文本查看 复制代码

import wsRequest from './static/js/websocket.js'

使用

[JavaScript] 纯文本查看 复制代码

new wsRequest("ws://xxx:3100/connect/websocket",5000)

2.全局调用
在main.vue页面中

[JavaScript] 纯文本查看 复制代码

//引入websocket文件
import wsRequest from './static/js/websocket.js'
//开启websocket
let websocket = new wsRequest("ws://xxx:3100/connect/websocket",5000)
//挂载到全局
Vue.prototype.$socket = websocket

页面中调用

[JavaScript] 纯文本查看 复制代码

let data={value:"传输内容",method:"方法名称"}
this.$socket.send(JSON.stringify(data));

注意事项

[JavaScript] 纯文本查看 复制代码

//在测试环境时url可以写成  ws://xxx:3100/connect/websocket
new wsRequest("ws://xxx:3100/connect/websocket",5000)

//发布体验版或正式版，url一定要写成  wss://xxx:3100/connect/websocket
new wsRequest("wss://xxx:3100/connect/websocket",5000)

转载https://blog.csdn.net/weixin_42000816/article/details/113307548

影知

https://www.kancloud.cn/guobaoguo/uniapp/820867
例子看一下了

六度科技

影知 发表于 2022-5-7 10:24
https://www.kancloud.cn/guobaoguo/uniapp/820867
例子看一下了

因为看不懂 所以要求个例子的