webscoket的使用

╰半夏微凉° 2022-12-30 01:23 135阅读 0赞

**Q:** webscoket是什么？  
**A:** 可以把其理解为可以由服务端主动推送消息的http协议

**Q:** webscoke有什么特点？  
**A:**

*  建立在 TCP 协议之上，服务器端的实现比较容易。
 *  与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用  
    HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
 *  数据格式比较轻量，性能开销小，通信高效。
 *  可以发送文本，也可以发送二进制数据。 没有同源限制，客户端可以与任意服务器通信。
 *  协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
 *

**Q:** webscoke有什么应用场景？  
**A:** 可以由服务端主动推送消息，要实时获取某些信息的时候完全不必前端写定时器实时请求接口查询了。比如聊天消息、警报提示、或者推送消息等

**Q:** webscoket方法及事件都有什么？  
**A:** 下面对一些常用的做一些讲解  
[详细请查看文档][Link 1]

// 判断游览器是否支持
       if (typeof WebSocket === "undefined") { 
            alert("您的浏览器不支持socket,请使用谷歌游览器");
            return false
        }
      // 实例化webscoket
       let scoketServer = new WebSocket('请求地址')  
        //------- 事件监听 -------
        var readyState = WebSocket.readyState;//返回当前 WebSocket 的链接状态，只读
        // 链接成功
       scoketServer.onopen = (event)=>{ 
     	 console.log("链接成功");
    	}
    	// 发生错误
       scoketServer.onerror = (event)=>{ 
     	 console.log("链接断开");
    	}
       // 获得消息
       scoketServer.onmessage = (event)=>{ 
     	 console.log("获得消息");
    	}
    	// 获得消息
       scoketServer.onmessage = (event)=>{ 
     	 console.log("获得消息");
    	}
    	// 链接断开
       scoketServer.onclose = (event)=>{ 
     	 console.log(" 链接断开");
    	}
    	
    	//------- 方法 -------
    	// 发送消息
       scoketServer.send('传输参数')
       // 关闭长链接
       scoketServer.close('传输参数')

**Q:** webscoket在VUE中如何使用？  
**A:**

export default { 
      name: "App",
      data() { 
        return { 
          path: "",
          // path:"ws://10.1.7.96:8186/ws/websocket",
          socket: "",
        };
      },
      created() { },
      mounted() { 
         this.init();
      },
      methods: { 
        init() { 
          if (typeof WebSocket === "undefined") { 
            alert("您的浏览器不支持socket,请使用谷歌游览器");
          } else { 
            // 实例化socket
            this.socket = new WebSocket(this.path);
            // 监听socket连接
            this.socket.onopen = this.open;
            // 监听socket错误信息
            this.socket.onerror = this.error;
            // 监听socket消息
            this.socket.onmessage = this.getMessage;
          }
        },
        open() { 
          // console.log("socket连接成功");
        },
        error() { 
          // console.log("发生错误");
        },
        getMessage(msg) { 
          // console.log("获得消息");
        },
        send() { 
          // console.log("发送信息");
        },
        close() { 
          // console.log("关闭链接");
        },
        
      },
      // 页面销毁
      destroyed() { 
         this.close()
      },
    };

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket/WebSocket