怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

一.下载vue-socket.io

npm install vue-socket.io --save

二.引入到vue-cli项目中

引入的方式有两种情形,具体根据你们的项目需求来做

a.第一种情景:webSocket连接的地址是固定的

在main.js中直接这样写

import VueSocketIO from 'vue-socket.io'
Vue.use(new VueSocketIO({
    debugtrue,
    connection'http://metinseylan.com:1992'//
}))

在这里我有句话要说,我百度出来的,连接方式很多直接在main.js中如下这样写:

import VueSocketio from 'vue-socket.io'
Vue.use(VueSocketio, 'http://socketserver.com:1923');              //\*\*\*\*\***这种方法我试了,我这边不行\*\*\*//**

如果有大神知道原因,可在评论下方告诉我哦

b.第二种情形:webSocket连接的地址的是动态的,是后台通过接口传给我们的

这里要提示的一点就是,当连接的地址是动态的,代码的执行顺序就很重要了,即new VueSocket在main.js中的位置

三.在mounted中执行connect

a.当socket地址是静态的写法

mounted(){
this.$socket.emit('connect', 1)
}

b.当socket地址是动态的

因为此时的socket连接地址是动态的,就会存在请求响应然后渲染的时间,这个时候就会出现socket还没渲染成功就执行了App.vue,这时候connect连接事件就不会触发,所以采用定时器的方法来执行connect

mounted() {
    var timerOne = window.setInterval(() = {
      if (this.$socket) {
        this.$socket.emit('connect', 1)
        window.clearInterval(timerOne)
        return;
      }
    }, 500)
  },

四,推送消息给后台,连接socket

五、socket连接成功

因为我们在  new VueSocketIO中开启了debug: true,就会在控制台中出现那些蓝色字体,来帮助我们调试socket,注意,如果蓝色的字中,没有包含我们在socket中定义的事件(connect、users、reconnect......),那就可能是我们在main,js中创建的new VueSocketIO渲染时间有问题,这个时候,connect事件也不会执行

后台定义的事件

如图上所示user、transferMessage这些名词,都是后台自定义的,每个项目中可能都会有所不同,我们接受消息的事件就是靠后台来告诉我们的

vue-socket.io中自带的几个事件

connect:查看socket是否渲染成功

disconnect:检测socket断开连接

reconnect:重新连接socket事件

以上就是所有啦,有问题可评论区见,如以上文章有错误地方,也可评论区指出......

本文转自 https://blog.csdn.net/weixin_43898997/article/details/122962888,如有侵权,请联系删除。

posted on   超级无敌美少男战士  阅读(231)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示