美文网首页WebSocket
uni-app框架的websocket代码

uni-app框架的websocket代码

作者: MiSiTeWang | 来源:发表于2020-08-08 17:29 被阅读0次
    <template>
        <view class="websockets">
            <button type="primary" @tap="clickRequest">点击发送请求</button>
            <button type="primary" @tap="leave">离开页面</button>
        </view>
    </template>
     
    <script>
        export default {
            onLoad() {
                // 进入这个页面的时候创建websocket连接【整个页面随时使用】
                this.connectSocketInit();
            },
            data() {
                return {
                    socketTask: null,
                    // 确保websocket是打开状态
                    is_open_socket: false
                }
            },
            // 关闭websocket【必须在实例销毁之前关闭,否则会是underfined错误】
            beforeDestroy() {
                this.closeSocket();
            },
            methods: {
                // 进入这个页面的时候创建websocket连接【整个页面随时使用】
                connectSocketInit() {
                    // 创建一个this.socketTask对象【发送、接收、关闭socket都由这个对象操作】
                    this.socketTask = uni.connectSocket({
                        // 【非常重要】必须确保你的服务器是成功的,如果是手机测试千万别使用ws://127.0.0.1:9099【特别容易犯的错误】
                        url: "ws://119.28.180.110:9099/echo",
                        success(data) {
                            console.log("websocket连接成功");
                        },
                    });
     
                    // 消息的发送和接收必须在正常连接打开中,才能发送或接收【否则会失败】
                    this.socketTask.onOpen((res) => {
                        console.log("WebSocket连接正常打开中...!");
                        this.is_open_socket = true;
                        // 注:只有连接正常打开中 ,才能正常成功发送消息
                        this.socketTask.send({
                            data: "uni-app发送一条消息",
                            async success() {
                                console.log("消息发送成功");
                            },
                        });
                        // 注:只有连接正常打开中 ,才能正常收到消息
                        this.socketTask.onMessage((res) => {
                            console.log("收到服务器内容:" + res.data);
                        });
                    })
                    // 这里仅是事件监听【如果socket关闭了会执行】
                    this.socketTask.onClose(() => {
                        console.log("已经被关闭了")
                    })
                },
                // 关闭websocket【离开这个页面的时候执行关闭】
                closeSocket() {
                    this.socketTask.close({
                        success(res) {
                            this.is_open_socket = false;
                            console.log("关闭成功", res)
                        },
                        fail(err) {
                            console.log("关闭失败", err)
                        }
                    })
                },
                clickRequest() {
                    if (this.is_open_socket) {
                        // websocket的服务器的原理是:发送一次消息,同时返回一组数据【否则服务器会进去死循环崩溃】
                        this.socketTask.send({
                            data: "请求一次发送一次message",
                            async success() {
                                console.log("消息发送成功");
                            },
                        });
                    }
                },
                leave() {
                    this.$uniReLaunch("/pages/tabbar/wallet/wallet")
                }
            }
        }
    </script>
    

    相关文章

      网友评论

        本文标题:uni-app框架的websocket代码

        本文链接:https://www.haomeiwen.com/subject/vkbhdktx.html