zoukankan      html  css  js  c++  java
  • websocket 协议 使用

    1、websocket简介

    websocket最主要特点是:服务器可以主动给浏览器发送消息,而不是被动接收浏览器请求。

    websock协议可以参考:http://www.ruanyifeng.com/blog/2017/05/websocket.html

    WebSocket 使用wswss协议(非http协议)Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息WebSocket并不限于以Ajax(XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信

    2、实现代码

    (1)websocket.js

    let websock;
    
    // 持续连接
    function connection(wsuri) {
      websock = new WebSocket(wsuri);
    
      // 建立连接
      websock.onopen = function(e) {
        console.log('收到服务器握手包.');
        setInterval(function() {
          let agentData = {'name': 'ping', 'message': 'message'}
          websocketsend(agentData)
        }, 30000)
      }
    
      // 断开连接
      websock.onclose = function(e) {
        console.log('和服务器断开连接! (' + e.code + ')');
      }
    
      // 连接发生错误
      websock.onerror = function() {
        console.log('websock连接发生错误');
      }
    }
    
    // 业务代码发送数据
    function sendSock(agentData) {
      console.log('agentData', agentData)
    
      // 链接成功,可以通信
      if (websock.readyState === websock.OPEN) {
    
        websocketsend(agentData);
      } else if (websock.readyState === websock.CONNECTING) {
    
        // 若是正在链接,则等待1s后重新调用
        setTimeout(function() {
          sendSock(agentData);
        }, 1000);
      } else {
    
        // 若未开启 ,则等待1s后重新调用
        setTimeout(function() {
          sendSock(agentData);
        }, 1000);
      }
    }
    
    // 数据发送
    function websocketsend(agentData) {
      websock.send(JSON.stringify(agentData));
    }
    
    export {connection, sendSock, websock}

    (2)业务代码

    //注意修改路径
    import * as websocket from 'websocket.js' 
    //vue mounted时挂在websocket
    mounted() {
        websocket.connection(yourUrl)
    
        // onmessage 用于指定收到服务器数据后的回调函数。
        websocket.websock.onmessage = (e) => {
         //业务处理
        }
      }
    methods:{
    handleEvent() {
    //发送数据
    websocket.sendSock(yourParams)}
    }

    (3)websockt需要服务端配置好服务。

  • 相关阅读:
    能ping通Linux但是ssh连不上问题解决方法
    php遍历目录与文件夹的多种方法详解
    Apache与Nginx的优缺点比较
    Apache查看连接数和限制当前的连接数
    【MySql】性能优化之分析命令
    PHP实现各种经典算法
    301、404、200、304等HTTP状态
    常用服务器资源地址集合
    关于WAMP的apache 人多了就访问非常卡的问题解决方法
    HTML基础
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9712066.html
Copyright © 2011-2022 走看看