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 发送消息的代码示例：
ini
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服务器进行连接。例如：
ini
const socket = new WebSocket('ws://localhost:8000');2.2 监听WebSocket事件
WebSocket对象提供多种事件用于监听连接状态和接收消息，例如：open、message、close、error等。
open：当与服务器建立连接时触发。message：当收到服务器发送的消息时触发。close：当与服务器断开连接时触发。error：当连接或通信过程中发生错误时触发。
通过添加事件监听器，可以在相应事件发生时执行特定的逻辑。例如：
javascript
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对象等。可以根据实际需求将数据格式化成特定的类型进行发送。例如：
ini
const message = 'Hello, server!';
socket.send(message);2.4 关闭WebSocket连接
当通信结束或不再需要与服务器通信时，需要关闭WebSocket连接以释放资源。通过调用WebSocket对象的close()方法可以主动关闭连接，也可以根据业务需求设置自动关闭连接的条件。例如：
go
socket.close();3 前端发送消息的应用实例
一个常见的前端发送消息的应用实例是在线聊天应用。在这种应用中，前端通过WebSocket与后端服务器建立连接，并实时发送和接收聊天消息。
以下是一个简单的前端发送消息的示例代码：
javascript
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能够提供双向、实时的通信机制，使得实时聊天应用能够快速、高效地发送和接收消息，实现即时通信。
- 实时协作应用：WebSocket可以用于实时协作工具，如协同编辑文档、白板绘画、团队任务管理等，团队成员可以实时地在同一页面上进行互动和实时更新。
- 实时数据推送：WebSocket可以用于实时数据推送场景，如股票行情、新闻快讯、实时天气信息等，服务器可以实时将数据推送给客户端，确保数据的及时性和准确性。
- 多人在线游戏：WebSocket提供了实时的双向通信机制，适用于多人在线游戏应用，使得游戏服务器能够实时地将游戏状态和玩家行为传输给客户端，实现游戏的实时互动。
- 在线客服和客户支持：WebSocket可以用于在线客服和客户支持系统，实现实时的客户沟通和问题解决，提供更好的用户体验，减少等待时间。
WebSocket适用于需要实时双向通信的场景，在这些场景中，它能够提供更好的实时性、低延迟和高效性能，为Web应用程序带来更好的交互性和用户体验。