【前端系列】前端如何使用websocket发送消息

序言

今天来学习一下前端如何使用websocket发送消息

1 基础介绍

1.1 什么是WebSocket

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。

在 WebSocket 中，客户端和服务器之间可以互相发送消息。

客户端可以使用 JavaScript 中的 WebSocket API 发送消息到服务器，也可以接收服务器发送的消息。

1.2 代码示例

下面是一个使用 WebSocket API 发送消息的代码示例：

1. var socket = new WebSocket("ws://example.com/socketserver");
3. socket.onopen = function(event) {
4. socket.send("Hello server!");
5. };
7. socket.onmessage = function(event) {
8. console.log("Received message from server: " + event.data);
9. };
11. socket.onerror = function(event) {
12. console.log("WebSocket error: " + event.error);
13. };
15. socket.onclose = function(event) {
16. console.log("WebSocket connection closed with code " + event.code);
17. };

在上面的代码中，首先创建了一个 WebSocket 对象，指定了服务器的地址。然后在 onopen 回调函数中，发送了一个消息到服务器。当服务器发送消息到客户端时，onmessage 回调函数会被触发，从而可以处理服务器发送的消息。如果出现错误或者连接被关闭，onerror 和 onclose 回调函数会被触发，从而可以处理这些事件。

需要注意的是，在使用 WebSocket 发送消息之前，必须先建立 WebSocket 连接。在上面的代码中，通过创建一个 WebSocket 对象来建立连接，然后在 onopen 回调函数中发送消息到服务器。如果在连接建立之前就尝试发送消息，那么这些消息将无法发送成功。

2 案例讲解

2.1 vue怎么用websocket发送请求

在 Vue 中使用 WebSocket，可以借助 WebSocket 对象来创建 WebSocket 连接，并通过 send() 方法向服务器发送消息。

下面是一个基本的 Vue 组件，演示如何使用 WebSocket 发送和接收消息：