精华内容
下载资源
问答
  • vue连接websocket

    2020-07-15 10:16:31
    1.很多场景需要多次更新数据,如果数据量不大的话我们一般会ajax,去更新数据 2.如果是很平凡去更新数据的话会给服务器很大的压力,所以建议用长链接的形式去,做减少请求... // var ws = new WebSocket("ws://localhos

    1.很多场景需要多次更新数据,如果数据量不大的话我们一般会ajax,去更新数据
    2.如果是很平凡去更新数据的话会给服务器很大的压力,所以建议用长链接的形式去,做减少请求的量,场景像比赛试试更新、实时通讯等
    3.ws://后加上自己要请求的接口

          initWebSocket(params) {
            let that = this
            that.ws = new WebSocket("ws://*********");
            // var ws = new WebSocket("ws://localhost:8096/websocket/111405");
            that.ws.onopen = (e) => {
            //  console.log(e)
            }
            that.ws.onmessage = function (e) {
               console.log(e.data)
              if(e.data != '连接成功'){
                let data = JSON.parse(e.data)
                if(data.type=='soccer'){
                  console.log(data.type)
                  that.updata(data)
                }
              }
            }
            that.ws.onclose = function (e) {
              console.log('WebSocket关闭: ')
              console.log(e)
            }
            that.ws.onerror = function (e) {
              console.log('WebSocket发生错误: ')
              this.initWebSocket()
            }
          }
    
    展开全文
  • 主要介绍了Vue通过WebSocket建立长连接的实现代码,文中给出了问题及解决方案,需要的朋友可以参考下
  • Vue连接websocket做全局通知

    千次阅读 2020-03-27 16:11:56
    ①在index.html中添加如下代码,连接websocket; var websock = null var serverPort = XX; //webSocket连接端口 localStorage.setItem(‘isOk’, ‘0’) localStorage.setItem(‘tipsData’, ‘’) var wsuri = ...

    ①在index.html中添加如下代码,连接websocket;

    var websock = null
    var serverPort = XX; //webSocket连接端口
    localStorage.setItem(‘isOk’, ‘0’)
    localStorage.setItem(‘tipsData’, ‘’)
    var wsuri = “ws://” + ip + “:” + serverPort + “/websocket”;
    if (websock == null) {
    websock = new WebSocket(wsuri);
    } else {
    websock.close();
    websock = null;
    websock = new WebSocket(wsuri);
    }
    websock.onclose = function (e) {
    websocketclose(e);
    }
    websock.onopen = function () {
    websocketOpen();
    }
    //添加事件监听
    websock.addEventListener(‘open’, function () {
    websock.send(“online” + sessionStorage.getItem(‘token’));
    });
    websock.onmessage = function (event) {
    if(sessionStorage.getItem(“user”) =null || sessionStorage.getItem(“user”)=undefined || sessionStorage.getItem(“user”)=""){
    return
    } //当用户退出后重新登录时,不会弹出之前的消息
    var msg = event.data;
    let error = msg.indexOf(“error:”);
    if(error==0){
    localStorage.setItem(‘isOk’, ‘1’)
    }
    localStorage.setItem(‘tipsData’, event.data) //获取到websocket传来的数据
    }
    websock.onerror = function () {
    console.log(‘websocket通信发生错误!’)
    }
    window.onbeforeunload = function () {
    websock.close()
    }
    websock.onclose = function (event) {
    console.log(‘连接关闭’)
    localStorage.setItem(‘isOk’, ‘0’)
    localStorage.setItem(‘tipsData’, ‘’)
    }
    function websocketclose(e) {
    console.log(“connection closed (” + e.code + “)”);
    }
    function websocketOpen(e) {
    console.log(“连接成功”);
    }

    ②在main.js中做一个定时器,每秒钟刷新一次,解析websocket传来的数据,以弹框的形式展示出来。

    // 定时查看报告是否生成
    setInterval(() => {
    if(sessionStorage.getItem(“user”)=null || sessionStorage.getItem(“user”)=undefined || sessionStorage.getItem(“user”)=""){
    return
    }
    if (localStorage.getItem(‘isOk’) === ‘1’) {
    let tipsData = localStorage.getItem(‘tipsData’)
    tipsData = tipsData.substring(6)
    var arr = tipsData.split("_")
    let building = arr[0]
    let classroom = arr[1]
    let message = arr[2]
    let notifi = building + “教学楼” + classroom + “教室” + message
    ElementUI.Notification({
    title: ‘警告’,
    message: notifi,
    type: ‘error’,
    position: ‘bottom-right’
    });
    localStorage.setItem(‘isOk’, ‘0’)
    localStorage.setItem(‘tipsData’, ‘’)
    // clearInterval(timer)
    // 如果这里清除了定时器只有在页面重新加载后才能启用定时器,那就不能时时获得生成报告的信息了
    }
    }, 1000)

    以上代码亲测有效,注意main.js中弹框的写法ElementUI.Notification({})

    展开全文
  • 最近项目需要使用到websocket 但是框架是vue 网上查阅很多资料 vue-websocket 老是连接不上 索性就不适用封装的插件了,直接使用原生的websocket 我这边需求是 只需要接受就好 不需要发送 代码如下: 爬坑之路:...
  • data中需要这些参数data() {return {websock: null, //建立的连接lockReconnect: false, //是否真正建立连接timeout: 28 * 1000, //30秒一次心跳timeoutObj: null, //外层心跳倒计时serverTimeoutObj: null, //内层...

    data中需要这些参数

    data() {

    return {

    websock: null, //建立的连接

    lockReconnect: false, //是否真正建立连接

    timeout: 28 * 1000, //30秒一次心跳

    timeoutObj: null, //外层心跳倒计时

    serverTimeoutObj: null, //内层心跳检测

    timeoutnum: null //断开 重连倒计时

    };

    },

    methods中:

    initWebSocket() {

    //初始化weosocket

    const wsuri = "ws://" + "xxxxx" + ":端口号";

    this.websock = new WebSocket(wsuri);

    this.websock.onopen = this.websocketonopen;

    this.websock.onmessage = this.websocketonmessage;

    this.websock.onerror = this.websocketonerror;

    this.websock.onclose = this.websocketclose;

    },

    reconnect() {

    //重新连接

    var that = this;

    if (that.lockReconnect) {

    // 是否真正建立连接

    return;

    }

    that.lockReconnect = true;

    //没连接上会一直重连,设置延迟避免请求过多

    that.timeoutnum && clearTimeout(that.timeoutnum);

    // 如果到了这里断开重连的倒计时还有值的话就清除掉

    that.timeoutnum = setTimeout(function() {

    //然后新连接

    that.initWebSocket();

    that.lockReconnect = false;

    }, 5000);

    },

    reset() {

    //重置心跳

    var that = this;

    //清除时间(清除内外两个心跳计时)

    clearTimeout(that.timeoutObj);

    clearTimeout(that.serverTimeoutObj);

    //重启心跳

    that.start();

    },

    start() {

    //开启心跳

    var self = this;

    self.timeoutObj && clearTimeout(self.timeoutObj);

    // 如果外层心跳倒计时存在的话,清除掉

    self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);

    // 如果内层心跳检测倒计时存在的话,清除掉

    self.timeoutObj = setTimeout(function() {

    // 重新赋值重新发送 进行心跳检测

    //这里发送一个心跳,后端收到后,返回一个心跳消息,

    if (self.websock.readyState == 1) {

    //如果连接正常

    // self.websock.send("heartCheck");

    } else {

    //否则重连

    self.reconnect();

    }

    self.serverTimeoutObj = setTimeout(function() {

    // 在三秒一次的心跳检测中如果某个值3秒没响应就关掉这次连接

    //超时关闭

    self.websock.close();

    }, self.timeout);

    }, self.timeout);

    // 3s一次

    },

    连接状态判断:

    websocketonopen(e) {

    //连接建立之后执行send方法发送数据

    console.log("成功");

    let actions = { test: "12345" };

    // this.websocketsend(JSON.stringify(actions));

    },

    websocketonerror() {

    //连接建立失败重连

    console.log("失败");

    this.initWebSocket();

    },

    websocketonmessage(e) {

    //数据接收

    const redata = JSON.parse(e.data);

    console.log(redata);

    this.aa = [...this.aa, redata.type];

    this.reset();

    },

    websocketsend(Data) {

    //数据发送

    this.websock.send(Data);

    },

    websocketclose(e) {

    //关闭

    console.log("断开连接", e);

    }

    完整代码:

    initWebSocket() {

    //初始化weosocket

    const wsuri = "ws://" + "xxxxx" + ":端口号";

    this.websock = new WebSocket(wsuri);

    this.websock.onopen = this.websocketonopen;

    this.websock.onmessage = this.websocketonmessage;

    this.websock.onerror = this.websocketonerror;

    this.websock.onclose = this.websocketclose;

    },

    reconnect() {

    //重新连接

    var that = this;

    if (that.lockReconnect) {

    // 是否真正建立连接

    return;

    }

    that.lockReconnect = true;

    //没连接上会一直重连,设置延迟避免请求过多

    that.timeoutnum && clearTimeout(that.timeoutnum);

    // 如果到了这里断开重连的倒计时还有值的话就清除掉

    that.timeoutnum = setTimeout(function() {

    //然后新连接

    that.initWebSocket();

    that.lockReconnect = false;

    }, 5000);

    },

    reset() {

    //重置心跳

    var that = this;

    //清除时间(清除内外两个心跳计时)

    clearTimeout(that.timeoutObj);

    clearTimeout(that.serverTimeoutObj);

    //重启心跳

    that.start();

    },

    start() {

    //开启心跳

    var self = this;

    self.timeoutObj && clearTimeout(self.timeoutObj);

    // 如果外层心跳倒计时存在的话,清除掉

    self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj);

    // 如果内层心跳检测倒计时存在的话,清除掉

    self.timeoutObj = setTimeout(function() {

    // 重新赋值重新发送 进行心跳检测

    //这里发送一个心跳,后端收到后,返回一个心跳消息,

    if (self.websock.readyState == 1) {

    //如果连接正常

    // self.websock.send("heartCheck");

    } else {

    //否则重连

    self.reconnect();

    }

    self.serverTimeoutObj = setTimeout(function() {

    // 在三秒一次的心跳检测中如果某个值3秒没响应就关掉这次连接

    //超时关闭

    self.websock.close();

    }, self.timeout);

    }, self.timeout);

    // 3s一次

    },

    websocketonopen(e) {

    //连接建立之后执行send方法发送数据

    console.log("成功");

    let actions = { test: "12345" };

    // this.websocketsend(JSON.stringify(actions));

    },

    websocketonerror() {

    //连接建立失败重连

    console.log("失败");

    this.initWebSocket();

    },

    websocketonmessage(e) {

    //数据接收

    const redata = JSON.parse(e.data);

    console.log(redata);

    this.aa = [...this.aa, redata.type];

    this.reset();

    },

    websocketsend(Data) {

    //数据发送

    this.websock.send(Data);

    },

    websocketclose(e) {

    //关闭

    console.log("断开连接", e);

    }

    展开全文
  • 1、前端框架:Vue + element-ui 2、后端框架:SpringBoot + Mybatis 3、数据库:H2 4、其他第三方工具或者插件: Jsch:用于远程连接ECS服务器。 Websocket:与前端进行实时交互。 xterm:渲染web版本的terminal终端...
  • 图片: 代码: 新建一个文件夹,里面有两个文件...export function newWebsocket() { var websocket = null // 判断当前环境是否支持Websocket if (window.WebSocket) { if (!websocket) { const ws = 'ws://172.

    图片:
    在这里插入图片描述
    代码:
    新建一个文件夹,里面有两个文件
    在这里插入图片描述

    组件1:
    index.js

    import Bus from './bus.js'
    
    var websocketConnectdCount = 0
    
    export function newWebsocket() {
      var websocket = null
      // 判断当前环境是否支持Websocket
      if (window.WebSocket) {
        if (!websocket) {
          const ws = 'ws://172.16.24.23:58080/webSocket'
          websocket = new WebSocket(ws)
        } else {
          console.log('not support websocket')
        }
    
        // 连接成功建立得回调方法
        websocket.onopen = function(e) {
          heartCheck.reset().start() // 成功建立连接后,重置心跳检测
          websocket.send('socket heart') // 连接成功将消息传给服务端
          console.log('connected successfully')
        }
    
        // 连接发生错误 会继续尝试发生新得连接 5次
        websocket.onerror = function() {
          console.log('onerror连接发生错误')
          websocketConnectdCount++
          if (websocketConnectdCount <= 5) {
            newWebsocket()
          }
        }
    
        // 连接到消息得回调方法
        websocket.onmessage = function(e) {
          console.log('接受到消息了', e)
          var message = e
          if (message) {
            Bus.$emit('message', message)
          }
          heartCheck.reset().start() // 如果获取到消息,说明连接是正常的,重置心跳检测
        }
    
        // 接受到服务端关闭连接时的回调方法
        websocket.onclose = function() {
          console.log('onclose断开连接')
        }
    
        // 监听窗口事件 窗口关闭 主动断开连接
        window.onbeforeunload = function() {
          websocket.close()
        }
    
        // 心跳检测, 每隔一段时间检测连接状态,如果处于连接中,
        // 就向server端主动发送消息,来重置server端与客户端的最大连接时间,如果已经断开了,发起重连。
        var heartCheck = {
          timeout: 300000, // 5分钟发一次心跳,比server端设置的连接时间稍微小一点,在接近断开的情况下以通信的方式去重置连接时间。
          timeoutObj: null,
          serverTimeoutObj: null,
          reset: function() {
            clearTimeout(this.timeoutObj)
            clearTimeout(this.serverTimeoutObj)
            return this
          },
          start: function() {
            this.serverTimeoutObj = setInterval(function() {
              if (websocket.readyState === 1) {
                console.log('连接状态,发送消息保持连接')
                websocket.send('socket heart') // 连接成功将消息传给服务端
                heartCheck.reset().start() // 如果获得消息 说明连接正常 重置心跳检测
              } else {
                console.log('断开连接, 尝试重连')
                newWebsocket()
              }
            }, this.timeout)
          }
        }
      }
    }
    

    组件2:
    bus.js

    import Vue from 'vue'
    export default new Vue()
    

    页面引入:

    <script>
      import Bus from '@/socket/bus'
      import { newWebsocket } from '@/socket/index'
    </script>
    
    created () {
        newWebsocket()
        Bus.$on('message', res => {
          this.getSock(res)
        })
      },
    
    methods: {
      getSock(msg) {
      	if (msg.data !== '服务器连接成功!') {
      	  let data = msg.data
      	  data = JSON.parse(data)
      	  console.log(data, 'socketData')  // data就是服务端发来的消息
      	}
      }
    }
    
    展开全文
  • exportdefault{data() {return{//websocketwebsock: null, //建立的连接lockReconnect: false, //是否真正建立连接timeout: 28 * 1000, //30秒一次心跳timeoutObj: null, //心跳心跳倒计时serverTimeoutObj: null, /...
  • websocketvuevue配置websocket
  • Vue+WebSocket 实现页面实时刷新长连接

    千次阅读 2019-11-25 16:52:16
    Vue+WebSocket 实现页面实时刷新长连接 知乎链接 最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死。。。 与后台...
  • vue使用websocket问题记录

    千次阅读 2019-04-09 10:47:28
    最近笔者新参与的一个web项目,拟定采用vue2.0来编写,期间遇到有关使用websocket的问题,记录一下,个中遇到的一些问题和解决方法,分享给有需要的人。  首先说一下vue2.0的初学体验,目前感觉上手...
  • 工作当中所遇到的问题以及解决方式 ...websocket会自动断开连接 解决方式: 前端加入心跳包机制 后端接收心跳包之后不进行任何消息的接收 直接附上代码: 注:此代码为提供思路代码 <scri...
  • 主要介绍了Django+Vue实现WebSocket连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 使用WebSocket 连接

    2021-08-03 00:39:26
    什么是WebSocket?HTML5 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 ...在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket A...
  • vue中使用websocket

    万次阅读 2018-12-26 16:21:51
    项目结构-login登录成功后会跳转到以main.vue为基础页面的界面上,所以我只要在main.vue页面的mounted中去创建以及在beforeDestroy中去销毁websocket基本就可以了。 因为在vue中有多个方法地方需要用到同一个websoc....
  • vue websocket 连接实战及遇到的问题

    千次阅读 2020-12-23 22:12:23
    常规的连接方法websocket () {let ws = new WebSocket('ws://localhost:8080')ws.onopen = () => {// Web Socket 已连接上,使用 send() 方法发送数据ws.send('Holle')console.log('数据发送中...')}ws.onmessage...
  • Vue实时通信 实现用webSocket连接聊天功能 1.安装vue-cli 2.init 初始化项目 3.npm install ws(websocket) 4.文件夹中创建server.js 1、服务器代码 //index.js //启动web服务,监听3000端口 绑定socket.io服务,...
  • Vue页面template <template> <div> <canvas style="width: 80%!important;height: auto!important;" id="canvas"></canvas> <br/>{{charId}} </div> </template>...
  • $ npm install -S vue-websocket 手册 下载生产文件。 该链接是在该项目的dist目录中找到的同一文件的镜像。 用法 注册插件。 默认情况下,它将连接到/ : import VueWebsocket from "vue-websocket" ; Vue . use ...
  • 简介 近年来随着 Web 前端的快速发展,浏览器新特性...WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket 通信协议于2011年被 IETF 定为标准 RFC 6455,并由 RFC 7936 补充规范。WebSocket API ...
  • 前端vue + websocket 的坑

    千次阅读 2020-06-06 15:29:54
    vue + websocket 的坑 记录一下在开发过程中的坑,不封装,没有插件,不使用vuex,纯小白写法(我就是小白本人) 本内容分为自己搭的测试环境和后端对接两个部分 因为一些原因,要保持与服务端的同步,然后使用了...
  • vue-cli项目使用proxy跨域访问websocket在一个项目中可以正常访问, 在另一个项目一旦访问websocket就会报以下错误 ![图片说明](https://img-ask.csdn.net/upload/202008/13/1597282819_321002.jpg) 另外,代码...
  • vue中使用 websocket

    万次阅读 2018-09-12 20:48:10
    websocketopen() {websocket连接成功后的触的函数} websocketonmessage(e){ 数据接收后触发的函数} e为后台推送过来的数据 websocketclose(){ 关闭后触发的函数} websocketerror(){连接失败后触发的函数} ...
  • 最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人一些帮助.废话少说,下面...
  • vuewebsocket使用,后端python 前端效果 前端代码-vue <template> <div id="app"> <img src="./assets/logo.png"> <div class="container"> <nav class="nav"> <ul>...
  • vue+WebSocket创建实现实时通讯 //websocket async initWebSocket() { if (websock) { return; } if (!const_chatid) return; if (typeof WebSocket === "undefined") { console.error("您的浏览器不支持...
  • Vue实现WebSocket通信以及webSocket通信ws代理配置 问题描述:最近项目业务上需要使用WebSocket来进行通信,这里简单记录一下实现的方法。 1、进行ws代理配置 webSocket的代理配置区别于普通的http代理配置,配置...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,568
精华内容 2,627
关键字:

vue连接websocket

vue 订阅