认识WebSocket 以及怎么使用WebSocket

nz一只肥猫

已于 2023-11-09 15:27:28 修改

阅读量613

点赞数 1

文章标签： vue.js javascript 前端

于 2023-11-09 15:25:22 首次发布

本文链接：https://blog.csdn.net/weixin_48357279/article/details/134312021

版权

本文介绍了WebSocket协议，一种全双工通信方式，用于实现实时交互。文章详细阐述了WebSocket与HTTP的区别、优点，以及在Web开发中的应用场景、使用步骤，包括在Vue中的实现和注意事项，如安全性、跨域问题等。

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

了解WebSocket

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它提供了一种实时的、持久的、双向通信机制，可以让浏览器和服务器之间实时地发送数据，而不需要使用AJAX轮询或长轮询等技术。

与HTTP相比，WebSocket具有以下优点：

实时性：WebSocket支持双向通信，可以实时地发送和接收数据，无需等待HTTP请求的响应。
减少网络流量：WebSocket的数据帧包含较少的头部信息，可以减少网络流量和延迟。
减轻服务器压力：WebSocket不会像HTTP请求一样每次都需要建立和断开连接，减轻了服务器的压力。
客户端和服务器端都可以主动发送数据，数据传输的效率更高。

在Web开发中，WebSocket常用于实现即时聊天、多人游戏、实时数据展示等功能。同时，由于WebSocket基于TCP协议，还可以用于远程控制和数据采集等领域。

如何使用

在前端中使用WebSocket需要经过以下步骤：

创建WebSocket对象：通过WebSocket构造函数创建WebSocket对象，传入服务器的WebSocket地址即可, 如：var socket = new WebSocket('ws://localhost:8080');
监听WebSocket事件：WebSocket对象提供了一系列的事件供我们监听：
- onopen：WebSocket连接成功时触发
- onmessage：WebSocket接收到消息时触发
- onerror：WebSocket连接发生错误时触发
- onclose：WebSocket连接关闭时触发
我们需要根据业务需求分别监听这些事件。比如，如果想要向服务器发送数据，可以在onopen事件中使用send()方法。
使用WebSocket对象发送和接收消息：可以使用send()方法向服务器发送消息，可以使用onmessage事件接收服务器返回的消息。

发送消息示例：socket.send('hello world');

接收消息示例：socket.onmessage = function(event) { console.log(event.data); }

在使用WebSocket时需要注意

在浏览器中，WebSocket只能使用安全协议（wss://），或者在localhost上使用非安全协议（ws://）；
处理WebSocket连接断开时的情况，可以在onclose事件中重新尝试连接或进行其他操作；
在使用WebSocket发送消息时，需要对数据进行序列化，例如使用JSON.stringify()方法将数据转换为字符串。在接收消息时，同样需要对接收到的字符串进行反序列化，例如使用JSON.parse()方法将字符串转换为JSON对象。

同事还需要注意以下几点：

安全性：由于WebSocket是基于TCP协议的，因此必须采取安全措施，如SSL加密，以保护数据的安全性。
数据传输量：由于WebSocket建立了持久连接，因此在传输大量数据时需要注意传输量，否则可能会导致网络拥塞。
服务器负载：WebSocket需要建立持久连接，因此服务器的负载会增加，需要根据实际需求进行服务器的规划和优化。
通信速度：WebSocket建立的连接速度较快，但是在通信过程中可能会受到网络条件的影响，需要对连接状态进行良好的监控和管理。
跨域访问：由于浏览器的同源策略，WebSocket需要进行跨域访问时需要进行特殊处理，如使用代理服务器或者设置跨域访问的策略。

在Vue中实现WebSocket的过程如下：

创建Vue组件并定义data和methods属性。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    connect () {
      const socket = new WebSocket('ws://localhost:3000')
      socket.addEventListener('message', (event) => {
        this.message = event.data
      })
    }
  }
}
</script>

在组件的created或mounted钩子中调用connect方法建立WebSocket连接。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="connect">Connect</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    connect () {
      const socket = new WebSocket('ws://localhost:3000')
      socket.addEventListener('message', (event) => {
        this.message = event.data
      })
    }
  },
  mounted() {
    this.connect()
  }
}
</script>

在后台服务器中实现WebSocket服务。

const WebSocket = require('ws')
const wss = new WebSocket.Server({ port: 3000 })

wss.on('connection', (ws) => {
  ws.on('message', (message) => {
    console.log(`Received message => ${message}`)
  })

  setInterval(() => {
    ws.send(`Message from server at ${new Date().toISOString()}`)
  }, 3000)
})

以上实现了一个简单的WebSocket示例，当组件挂载时会自动建立WebSocket连接，接收并显示从服务器发送的消息。