如何使用 WebSocket 替代 Socket.io 进行实时通信-JavaScript中文网-JavaScript教程资源分享门户

WebSocket 是一种实时双向通信协议，能够建立客户端和服务器之间的全双工通信连接，相比传统的 HTTP 协议，它具备更高效、更可靠的传输性能，使得实时通信变为可能。而 Socket.io 是一种基于 WebSocket 的实现，它封装了 WebSocket，提供了一种更为简便的方式来进行实时通信，不过在某些情况下，使用 WebSocket 代替 Socket.io 能够获得更好的性能和可控性。本文将介绍如何在前端中使用 WebSocket 替代 Socket.io 进行实时通信。

WebSocket 和 Socket.io 简介

WebSocket 协议是 HTML5 中新增的一种协议，其使用 WebSocket API 来提供实时双向通信，建立连接之后，双方可以随时向对方发送消息，而无需在每次数据传输时都进行建立或者关闭请求，这使得应用之间的关联变得更加紧密、灵活。

Socket.io 在 WebSocket 基础上进行了封装，提供了一种方便的 API 来进行实时通信。Socket.io 抽象了 WebSocket 协议，使得开发者可以轻松地使用实时通信，而无需考虑 WebSocket 的规范和实现细节。除此之外，它还能够兼容多种浏览器，包括旧版的浏览器，以及支持多种传输方式，如 WebSocket、longpolling、iframe和JSONP 等。

WebSocket 的实现

在使用 WebSocket 之前，需要先检查当前浏览器是否支持 WebSocket 协议。如下：

if ('WebSocket' in window) {
  // 可以使用 WebSockets 收发数据
} else {
  alert('This browser does not support WebSockets.');
}

当然，借助 polyfill 库，可以使得 WebSocket 在旧版浏览器中也能够使用。

WebSocket 的创建和传输都是异步的过程，因此需要使用事件监听器来监控创建、关闭、接收消息等过程。如下：

// javascriptcn.com 代码示例
// 创建 WebSocket 连接对象
const ws = new WebSocket('ws://localhost:1000');

//监听连接成功事件
ws.addEventListener('open', (event) => {
  console.log('Connected to WebSocket server');
})

// 监听接收消息事件
ws.addEventListener('message', (event) => {
  console.log('Message from server: ', event.data);
});

// 监听连接关闭事件
ws.addEventListener('close', (event) => {
  console.log('Disconnected from WebSocket server');
});

// 监听连接错误事件
ws.addEventListener('error', (event) => {
  console.log('WebSocket server error');
});

以上是 WebSocket 建立连接时的常规操作，接下来，将介绍 WebSocket 的发送和接收消息。

发送消息

WebSocket 实例提供了 send() 方法，用于向 WebSocket 服务器发送数据。send() 方法可以接受字符串类型的数据。

ws.send('Hello WebSocket Server!');

接收消息

WebSocket 实例提供了 addEventListener() 方法，用于监听特定事件。当 WebSocket 服务器向客户端发送消息时，会由 message 事件通知客户端。在 WebSocket 实例中，message 事件只会发送被转换为二进制数据的数据块。

WebSocket 组件的实现

下面，在 Vue.js 应用中实现 WebSocket 组件。

该组件通过 props 属性接收 WebSocket URL 和消息传递事件。其中，即调用了 WebSocket 对象本身的 open、message、close、error 事件，以及实现了runConnection()和sendMsg()两个函数，分别用于连接WebSocket和发送消息。

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>{{title}}</h1>
    <p v-for="(message, index) in messages" :key="index">{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    url: String,
    messageEvent: String,
  },
  data() {
    return {
      title: 'WebSocket',
      messages: [],
      ws: null,
    }
  },
  mounted() {
    this.runConnection();
  },
  beforeDestroy() {
    this.ws.close();
  },
  methods: {
    runConnection() {
      this.ws = new WebSocket(this.url);

      this.ws.addEventListener('open', (event) => {
        console.log('Connected to WebSocket server');
      });

      this.ws.addEventListener(this.messageEvent, (event) => {
        console.log('Message from server: ', event.data);
        this.messages.push(event.data);
      });

      this.ws.addEventListener('close', (event) => {
        console.log('Disconnected from WebSocket server');
      });

      this.ws.addEventListener('error', (event) => {
        console.log('WebSocket server error');
      });
    },
    sendMsg() {
      if (this.ws.readyState === WebSocket.OPEN) {
        const msg = 'Msg from component WebSocket';
        this.ws.send(msg);
        console.log(`Client sent message: ${msg}`);
      }
    },
  },
};
</script>

在父组件中，可以通过 props 属性传入实时通信的 URL 和消息传递事件。

// javascriptcn.com 代码示例
<template>
  <div>
    <WebSocketComponent url="ws://localhost:7071" messageEvent="message" />
  </div>
</template>

<script>
import WebSocketComponent from './WebSocketComponent.vue';

export default {
  components: {
    WebSocketComponent,
  },
};
</script>

总结

本文主要介绍了如何使用 WebSocket 替代 Socket.io 进行实时通信，并给出了实现该功能的示例代码，我们可以发现，WebSocket 和 Socket.io 都是用来实现实时通信的协议，但是通过本文的介绍，我们可以了解到 WebSocket 能够更好地发挥性能优势和可控性，因此在一些场景下，选择原生的 WebSocket 提供 API 实现实时通信的方案会更加灵活和高效，而 Socket.io 则会更方便和兼容不同浏览器、实现的功能也更全面。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653f8ea87d4982a6eb91e81a