Websocket学习笔记

之前只在写javafx+java的聊天室项目中使用过Socket，目前还没有在实际项目中使用过WebSocket，所以学习一下，接下来的项目中有一个社区功能，社区功能必然会衍生出私信功能，所以先来学习一下 Websocket。

由于 http 存在⼀个明显的弊端（消息只能有客户端推送到服务器端，⽽服务器端不能主动推送到客户端），导致如果服务器如果有连续的变化，这时只能使⽤轮询，⽽轮询效率过低，并不适合。于是 WebSocket 被发明出来

WebSocket 是⼀种在 Web 应⽤程序中实现双向通信的协议。与传统的 HTTP 请求-响应模式不同，WebSocket 提供了持久连接，使服务器能够主动向客户端推送数据，⽽不需要客户端发起请求。

Websocket的特性

1. 双向通信：WebSocket 允许客户端和服务器之间建⽴持久连接，并通过这个连接进⾏双向通信。客户端和服务器可以随时发送消息给对⽅，实现实时的数据传输。

2. 实时性：相⽐传统的 HTTP 请求-响应模式，WebSocket 具有更低的延迟和更⾼的实时性。服务器可以⽴即将数据推送给客户端，⽽不需要等待客户端的请求。

3. 协议标识符：WebSocket 使⽤ ws:// （⾮加密）或 wss:// （加密）作为协议标识符，⽤于建⽴与服务器的连接。

4. 较少的控制开销：WebSocket 的协议控制数据包头部较⼩，不需要携带完整的头部信息，减少了数据传输的开销。

5. ⽀持⽂本和⼆进制数据：WebSocket 不仅可以传输⽂本数据，还可以传输⼆进制数据，使得它适⽤于各种类型的应⽤场景。

6. ⽀持扩展：WebSocket 协议定义了扩展机制，允许⽤户⾃定义扩展或实现⾃定义的⼦协议，例如压缩算法、认证机制等。

7. 无跨域问题：WebSocket 协议不存在跨域限制，可以轻松地在不同域名下进⾏通信。

8. 简单实现：实现 WebSocket 相对简单，服务器端和客户端都有相应的库或 API 可以使⽤，例如 Node.js 中的 socket.io、ws 等，客户端则可以使⽤浏览器提供的 WebSocket API。

WebSocket 提供了⼀种⾼效、实时的双向通信机制，使得 Web 应⽤程序可以实现实时更新、即时通信等功能。它具有较低的延迟、⽀持⽂本和⼆进制数据传输、⽆跨域限制等优势，可以⼴泛应⽤于在线聊天、实时数据展示、多⼈协同编辑等领域。

---

1. WebSocket 示例代码：

以下是⼀个简单的使⽤ WebSocket 的示例代码，包括客户端和服务器端的实现：

客户端代码（JavaScript）：

// 创建 WebSocket 连接

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

// 监听连接建⽴事件

socket.addEventListener('open', () => {

console.log('Connected to server');


// 发送消息给服务器

socket.send('Hello server!');

});

// 监听接收到消息事件

socket.addEventListener('message', (event) => {

const message = event.data;

console.log('Received message:', message);

});

// 监听连接关闭事件

socket.addEventListener('close', () => {

console.log('Disconnected from server');

});

服务器端代码（Node.js）：

const WebSocket = require('ws');

// 创建 WebSocket 服务器

const wss = new WebSocket.Server({ port: 3000 });

267// 监听连接建⽴事件

wss.on('connection', (socket) => {

console.log('Client connected');

// 监听接收到消息事件

socket.on('message', (message) => {

console.log('Received message:', message);

// 发送消息给客户端

socket.send('Hello client!');

});

// 监听连接关闭事件

socket.on('close', () => {

console.log('Client disconnected');

});

});

客户端通过 new WebSocket(url) 创建⼀个 WebSocket 连接，监听连接建⽴、接收到消息和连接关闭等事件，并通过 send() ⽅法发送消息给服务器。服务器端使⽤ ws 模块创建 WebSocket 服务器，监听连接建⽴、接收到消息和连接关闭等事件，并通过 send() ⽅法发送消息给客户端。

---

2. socket.io 示例代码：

客户端代码（JavaScript）：

// 引⼊ socket.io 客户端库

import io from 'socket.io-client';

// 连接到服务器

const socket = io('http://localhost:3000');

// 监听连接建⽴事件

socket.on('connect', () => {

console.log('Connected to server');


268 // 发送消息给服务器

socket.emit('message', 'Hello server!');

});

// 监听接收到消息事件

socket.on('message', (message) => {

console.log('Received message:', message);

});

// 监听连接关闭事件

socket.on('disconnect', () => {

console.log('Disconnected from server');

});

服务器端代码（Node.js）：

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);
// 监听连接建⽴事件
io.on('connection', (socket) => {
 console.log('Client connected');
 // 监听接收到消息事件
 socket.on('message', (message) => {
 console.log('Received message:', message);
 // 发送消息给客户端
 socket.emit('message', 'Hello client!');
 });
 // 监听连接关闭事件
 socket.on('disconnect', () => {
 console.log('Client disconnected');
 });
});
// 启动 HTTP 服务器
http.listen(3000, () => {
 console.log('Server 已经在本地的 3000 端⼝启动');
});

客户端通过 import io from 'socket.io-client' 引⼊ socket.io 客户端库，连接到服务器并监听连接建⽴、接收到消息和连接关闭等事件。服务器端使⽤Express 创建⼀个 HTTP 服务器，通过socket.io 模块创建 socket.io 实例，并监听连接建⽴、接收到消息和连接关闭等事件，并通emit() ⽅法发送消息给客户端。