WebSocket的实现原理

最新推荐文章于 2024-07-31 00:31:27 发布

cocomilkiiii

最新推荐文章于 2024-07-31 00:31:27 发布

阅读量607

点赞数 1

文章标签： websocket vue.js

本文链接：https://blog.csdn.net/cocomilkiiii/article/details/109240798

版权

本文介绍了WebSocket作为应用层协议的工作原理，强调其依赖HTTP进行握手后通过TCP进行双向通信的特点。接着，展示了在Vue.js环境中如何正确设置和使用WebSocket，包括在组件的生命周期钩子中初始化和关闭连接，以及处理接收到的数据。代码示例详细演示了WebSocket的创建、监听事件及数据收发的方法。

摘要由CSDN通过智能技术生成

一、什么是websocket
WebSocket是应用层第七层的一个应用层协议，它必须依赖HTTP协议进行一次握手，握手成功后，数据就直接从TCP通道传输，与HTTP无关了。即：websocket分为握手和数据传输阶段，即进行了HTTP、握手+双工的TCP连接。
二、vue中使用websocket的正确方法

<template>
  <div class="test">

  </div>
</template>

<script>
  export default {
    name : 'test',
    data() {
      return {
        websock: null,
      }
    },
    created() {
      this.initWebSocket();
    },
    destroyed() {
      this.websock.close() //离开路由之后断开websocket连接
    },
    methods: {
      initWebSocket(){ //初始化weosocket
        const wsuri = "ws://127.0.0.1:8080";
        this.websock = new WebSocket(wsuri);
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onopen = this.websocketonopen;
        this.websock.onerror = this.websocketonerror;
        this.websock.onclose = this.websocketclose;
      },
      websocketonopen(){ //连接建立之后执行send方法发送数据
        let actions = {"test":"12345"};
        this.websocketsend(JSON.stringify(actions));
      },
      websocketonerror(){//连接建立失败重连
        this.initWebSocket();
      },
      websocketonmessage(e){ //数据接收
        const redata = JSON.parse(e.data);
      },
      websocketsend(Data){//数据发送
        this.websock.send(Data);
      },
      websocketclose(e){  //关闭
        console.log('断开连接',e);
      },
    },
  }
</script>
<style lang='less'>
 
</style>