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();
            }
          });
  • 相关阅读:
    vuejs cli3 env配置文件实践指南
    Nginx的rewrite(地址重定向)剖析
    什么是TCP粘包?怎么解决这个问题
    windows bat批处理语法简析
    BAT文件语法和技巧(bat文件的编写及使用)
    Asyncio之EventLoop笔记
    python struct的使用例子
    redis慢查询笔记
    redis基础操作概念等笔记
    Python实现Dijkstra算法
  • 原文地址:https://www.cnblogs.com/shababy/p/13517246.html
Copyright © 2011-2022 走看看