zoukankan      html  css  js  c++  java
  • WebSocket

    index.js 文件下封装 getSocket 方法:

    function getSocket(url, params, callback) {
        let socket;
    
        if (typeof(WebSocket) === 'undefined') {
            alert('您的浏览器不支持WebSocket')
        } else {
            console.log('您的浏览器支持WebSocket');
    
            // 初始化 WebSocket 对象,指定要连接的服务器地址与端口建立连接
            socket = new WebSocket(url);
    
            // 打开事件 - MDN中使用 addEventListener 添加监听事件的
            socket.onopen = function() {
                console.log('Socket 已打开');
                socket.send(params);
            };
    
            // 获得消息事件
            socket.onmessage = function(msg) {
                // 发现消息进入, 开始处理前端触发逻辑
                callback(msg, socket);
            };
    
            // 关闭事件
            socket.onclose = function() {
                console.log('Socket 已关闭');
            };
    
            // 发生了错误事件
            socket.onerror = function() {
                console.log('Socket 发生了错误,请刷新页面');
                // 此时可以尝试刷新页面
            };
        }
    }
    
    export {
        getSocket
    };

    页面中引入:

    import { getSocket } from "@/plugin/websocket";

    页面使用:

    getSocket("ws://localhost:8000", "", (data, ws) => {
            let res = data.data;
            // 保存数据对象, 以便发送消息
            this.wsData = ws;
            let msgList = JSON.parse(res);
    
            //消息弹窗
            let notify = () => {
              this.$notify.info({
                title: msgList.subjectName,
                message: msgList.title
              });
            };
            if (msgList.orgCode == undefined) {
              notify();
              return false;
            }
            //当前用户orgCode 是否与推送orgCode 相等
            if (this.getUserInfo().orgCode == msgList.orgCode) {
              notify();
            }
          });
  • 相关阅读:
    2.2、Dstreams数据源之高级数据源
    配置git 环境变量
    AngularJS的 $resource服务 关于CRUD操作
    如何安装和使用Karma-Jasmine
    ui-router 留存
    angular的service与factory
    留存- angularjs 弹出框 $modal
    js 的eval()方法 计算某个字符串,并执行其中的的 JavaScript 代码;
    javascript函数作用域和提前声明
    npm 全局环境变量配置
  • 原文地址:https://www.cnblogs.com/shababy/p/13517246.html
Copyright © 2011-2022 走看看