配置WebSocket

逃离我推掉我的手 2023-09-28 22:28 6阅读 0赞

## 配置WebSocket ##

> 1.  websocket使用也比较多的，它和http协议没有太多关系，但是有交集在于：（Websocket 其实是一个新协议，跟 HTTP 协议基本没有关系，只是为了兼容现有浏览器，所以在握手阶段使用了 HTTP）

> 1.  首先，WebSocket 是一个持久化的协议，相对于 HTTP 这种非持久的协议来说。（相对于http来说，http是一次请求一次响应，结束：request–response结束。在通讯过程中，一直在请求响应，反复如此）而websocket通过一次http握手，整个通讯建立在一次连接状态中，服务端会一直知道你的信息，知道关闭websocket，不需要服务端反复解析。在传输中节省流量和时间，提高性能

> 1.  HTTP 协议有一个缺陷：通信只能由客户端发起。而websocket协议，实现了服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种

实现

1，编写配置类  
![在这里插入图片描述][d737212cb73d4663883d04e1c574aa54.png]  
2，编写逻辑层

![在这里插入图片描述][f48f2abc892f415daf1342613ea11c21.png]  
vue 前端调用

methods: {
        
    
    
        initWebSocket: function (){
        
          this.websock = new WebSocket("ws://localhost:8080/webSocket");
          this.websock.onopen = this.websocketonopen;
          this.websock.onerror = this.websocketonerror;
          this.websock.onmessage = this.websocketonmessage;
          this.websock.onclose = this.websocketclose;
        },
        websocketonopen: function () {
        
          console.log("WebSocket连接成功")
        },
        websocketonerror: function (e) {
        
          console.log("WebSocket连接发生错误")
        },
        websocketonmessage: function (e) {
        
          this.dataObj = JSON.parse(e.data)
          this.drawLine()
          this.dataObjState = false
        },
        websocketclose: function (e) {
        
          console.log("connection closed (" + e.code + ")")
        }
    
      }

[d737212cb73d4663883d04e1c574aa54.png]: https://img-blog.csdnimg.cn/d737212cb73d4663883d04e1c574aa54.png
[f48f2abc892f415daf1342613ea11c21.png]: https://img-blog.csdnimg.cn/f48f2abc892f415daf1342613ea11c21.png