专栏首页技术分享文章Vue-WebSocket的使用
原创

Vue-WebSocket的使用

如果不是很明白的话,可以看下讲解 WebSocket

data(){
    return{
        websock:null
    }
}
created() {
            this.initWebSocket()//初始化weosocket
        },
methods:{
         /***初始化weosocket***/
            initWebSocket(){
                const wsuri = `ws://192.168.0.0:8083/xxxxxx/websocket`//后端提供地址
                this.websock = new WebSocket(wsuri);
                this.websock.onmessage = this.websocketonmessage;
                this.websock.onopen = this.websocketonopen;
                this.websock.onerror = this.websocketonerror;
                this.websock.onclose = this.websocketclose;
            },
            /***连接建立执行send方法发送数据***/
            websocketonopen(){
                // this.websocketsend()
            },
            /***连接失败重新连接***/
            websocketonerror(){
                this.initWebSocket()
            },
            /***接收数据***/
            websocketonmessage(result){
                console.log('接收到新消息=',result)
            },
            /***数据发送***/
            websocketsend(data){//数据发送
                console.log(data)
                // this.websock.send(data)
            },
            /***断开连接***/
            websocketclose(e){ 
                console.log('断开连接', e)
            }
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于vue的图片裁剪插件vue-cropper ,上传图片到腾讯云存储

    〆 千寻、
  • 最新elementui,el-data-picker回显修改不了,或回显不上的解决办法

    看了网上的文档,要么不全,要么不管用,麻烦,废话不多,直接上代码,如果不满足你的需求的话,自行修改,introForm的定义请自行定义,应该可以看得懂。

    〆 千寻、
  • 最新elementui,el-data-picker回显修改不了,或回显不上解决办法

    看了网上的文档,要么不全,要么不管用,麻烦,废话不多,直接上代码,如果不满足你的需求的话,自行修改

    〆 千寻、
  • 7. 偷用Swiper简改

    看这段代码应该就很清楚了,如果是android系统就渲染Pager如果是ios就使用横向的ScrollView,修改后的app首页如下:

    MasterVin
  • 使用物理引擎Box2D设计类愤怒小鸟的击球游戏--基本架构设置

    望月从良
  • es6中class类的全方面理解(二)------继承

    继承是面向对象中一个比较核心的概念。ES6 class的继承与java的继承大同小异,如果学过java的小伙伴应该很容易理解,都是通过extends关键字继承。...

    用户1272076
  • Flutter开发:TextField常用属性的使用

    在flutter开发过程中,掌握常用组件的使用是必备技能,flutter常用的组件和App开发时候常用的控件基本一模一样,只是使用的方式不一样罢了。

    三掌柜
  • TRTC学习之旅(三)-- 使用vue+ts集成互动直播

    上次我们已经用vue+ts实现了多人会议室的搭建,这次我们继续在上次项目的基础上,实现互动直播功能。

    黑眼圈云豆
  • 冬天到了,分享两款雪花特效代码

    小小鱼儿小小林
  • ActiveMQ源码分析——生产消息

    创建Session时,第一个传入是否开启事务,第二个传入session提交消费消息的方式 接下来看源码处理,生产者id对象由当前sessionID加上使用内部s...

    歪歪梯

扫码关注云+社区

领取腾讯云代金券