1 基础介绍

1.1 什么是WebSocket

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

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

1.2 WebSocket与HTTP的区别

WebSocket与HTTP的区别在于连接的性质和通信方式。WebSocket是一种双向通信的协议，通过一次握手即可建立持久性的连接，服务器和客户端可以随时发送和接收数据。而HTTP协议是一种请求-响应模式的协议，每次通信都需要发送一条请求并等待服务器的响应。WebSocket的实时性更好，延迟更低，并且在服务器和客户端之间提供双向的即时通信能力，适用于需要实时数据传输的场景。

1.3 代码示例

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

var socket = new WebSocket("ws://example.com/socketserver");

socket.onopen = function(event) {

  socket.send("Hello server!");

};

socket.onmessage = function(event) {

  console.log("Received message from server: " + event.data);

};

socket.onerror = function(event) {

  console.log("WebSocket error: " + event.error);

};

socket.onclose = function(event) {

  console.log("WebSocket connection closed with code " + event.code);

};

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

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

2 前端使用WebSocket的流程

2.1 创建WebSocket对象

通过JavaScript中的new WebSocket(URL)方法创建WebSocket对象，其中URL是WebSocket服务器的地址。根据实际情况修改URL以与特定的WebSocket服务器进行连接。例如：

const socket = new WebSocket('ws://localhost:8000');

2.2 监听WebSocket事件

WebSocket对象提供多种事件用于监听连接状态和接收消息，例如：open、message、close、error等。

• 
  
• open：当与服务器建立连接时触发。
  
• message：当收到服务器发送的消息时触发。
  
• close：当与服务器断开连接时触发。
  
• error：当连接或通信过程中发生错误时触发。
  

通过添加事件监听器，可以在相应事件发生时执行特定的逻辑。例如：

socket.addEventListener('open', () => {
console.log('WebSocket连接已建立');

});


socket.addEventListener('message', (event) => {
const message = event.data;
console.log('收到消息：', message);

});


socket.addEventListener('close', () => {
console.log('WebSocket连接已断开');

});


socket.addEventListener('error', (error) => {
console.error('发生错误：', error);

});

2.3 发送消息

通过WebSocket对象的send(data)方法发送消息，其中data是要发送的数据，可以是字符串、JSON对象等。可以根据实际需求将数据格式化成特定的类型进行发送。例如：

const message = 'Hello, server!';

socket.send(message);

2.4 关闭WebSocket连接

当通信结束或不再需要与服务器通信时，需要关闭WebSocket连接以释放资源。通过调用WebSocket对象的close()方法可以主动关闭连接，也可以根据业务需求设置自动关闭连接的条件。例如：

socket.close();

3 前端发送消息的应用实例

一个常见的前端发送消息的应用实例是在线聊天应用。在这种应用中，前端通过WebSocket与后端服务器建立连接，并实时发送和接收聊天消息。

以下是一个简单的前端发送消息的示例代码：

const socket = new WebSocket('ws://localhost:8000');

// 连接建立事件

socket.addEventListener('open', () => {
console.log('WebSocket连接已建立');

});

// 消息接收事件

socket.addEventListener('message', (event) => {
const message = event.data;
console.log('收到消息：', message);
// 处理接收到的消息，将其显示在前端界面上

});

// 发送消息
function sendMessage(message) {

  socket.send(message);

}

// 调用发送消息的函数，例如在点击按钮后发送消息
const sendButton = document.getElementById('sendBtn');

sendButton.addEventListener('click', () => {
const messageInput = document.getElementById('messageInput');
const message = messageInput.value;
sendMessage(message);

  messageInput.value = ''; // 清空输入框

});

// 连接关闭事件

socket.addEventListener('close', () => {
console.log('WebSocket连接已断开');

});

// 连接错误事件

socket.addEventListener('error', (error) => {
console.error('发生错误：', error);

});

该示例中，通过创建WebSocket对象，监听连接建立事件、消息接收事件、连接关闭事件和错误事件，从而实现与服务器的实时通信。通过构建界面和处理消息的逻辑，可以实现实时聊天功能。

这只是一个简单的示例，实际上，前端发送消息的应用可以更广泛，如实时数据更新、多人协作编辑、实时游戏等。具体的实现方式和功能根据实际需求而定，可以灵活调整和扩展。

4 WebSocket的应用场景

WebSocket的应用场景包括但不限于以下几个方面：

WebSocket适用于需要实时双向通信的场景，在这些场景中，它能够提供更好的实时性、低延迟和高效性能，为Web应用程序带来更好的交互性和用户体验。