在vuejs中使用websocket进行实时通讯

var app=new Vue({
    el: '#app',
    data: {
        server:"ws://127.0.0.1:8080/chat_server",
        socket:null,
    },
    methods: {
        //初始化websocket
        initConn() {
            let socket = new ReconnectingWebSocket(this.server);//创建Socket实例
            this.socket = socket
            this.socket.onmessage = this.OnMessage;
            this.socket.onopen = this.OnOpen;
        },
        OnOpen() {
            let mes = {}
            mes.type = "test";
            this.socket.send(JSON.stringify(mes));
        },
        OnMessage(e) {
            const redata = JSON.parse(e.data);
            console.log(redata)
        },

    },
    created: function () {
        this.initConn();
    }
})

其他的websocket回调函数可以在initConn中进行赋值给method中的方法

另外websocket是使用的这个类库reconnecting-websocket , 可以进行自动的断线重连

<script src="https://cdn.bootcss.com/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js"></script>

element-ui时间选择器el-date-picker默认当前时间至7天之前时间

vue实现表格的编辑，包括选择，合并，拆分，删除行/列，添加行/列

Motion for Vue：一个轻量级且功能强大的Vue3动画库

el-table合并行的通用方法（附js代码）

vue前端分页功能实现代码（附js代码）

上面是“在vuejs中使用websocket进行实时通讯”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_107.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！