之前只在写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() ⽅法发送消息给客户端。