郑州小程序定制公司,天津网站seo设计,东莞网站主页制作,邦邻网站建设1.WebSocket 简介
WebSocket 是一种网络通信协议#xff0c;提供了在单个TCP连接上进行全双工通信的能力。这意味着客户端和服务器可以同时发送和接收数据#xff0c;而不需要等待对方的回应。WebSocket 协议在2011年成为国际标准#xff0c;并且被大多数现代浏览器所支持。…1.WebSocket 简介
WebSocket 是一种网络通信协议提供了在单个TCP连接上进行全双工通信的能力。这意味着客户端和服务器可以同时发送和接收数据而不需要等待对方的回应。WebSocket 协议在2011年成为国际标准并且被大多数现代浏览器所支持。
特点 全双工通信WebSocket 允许服务器主动向客户端发送消息而不需要客户端先发送请求。这与HTTP协议不同后者是请求-响应模式的。 持久连接一旦WebSocket连接建立它将保持开放状态直到客户端或服务器决定关闭它。这减少了频繁建立和关闭连接的开销。 头部开销小与HTTP相比WebSocket的数据传输头部开销更小因为它不需要像HTTP那样每次通信都发送请求和响应头。 适用性广泛WebSocket适用于需要实时数据传输的应用比如在线游戏、实时聊天应用、股票行情更新等。 安全性WebSocket可以通过WSSWebSocket Secure协议实现加密类似于HTTPS。
2. 服务端使用
1. java SpringBoot 框架下使用 WebSocket
1. 引入依赖 websocket 的maven 坐标
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependency2. 编写 WebSocket
在项目下创建一个websocket 包 创建WebSocketServer 类通过Component 注解将该类交给spring 管理通过ServerEndpoint 注解将该类声明为websocket 服务端并通过参数指定访问路径
Component
ServerEndpoint(/websocket) // 声明为websocket 服务端并通过参数指定访问路径
public class WebSocketServer extends TextWebSocketHandler {}接下来需要为类编写三个主要的方法用于处理客户端的连接、消息和关闭
OnOpen 注解的方法用于处理客户端的连接OnMessage 注解的方法用于处理客户端发送的消息OnClose 注解的方法用于处理客户端的关闭
Component
ServerEndpoint(/websocket) // 声明为websocket 服务端并通过参数指定访问路径
public class WebSocketServer extends TextWebSocketHandler {OnOpenpublic void afterConnectionEstablished(Session session) {System.out.println(连接成功);}OnMessageprotected void handleTextMessage(Session session, TextMessage message) {}OnClosepublic void afterConnectionClosed(Session session, CloseStatus status) {System.out.println(连接关闭);super.afterConnectionClosed(session, status);}
}
3. 配置WebSocket 通过一个config类来统一注册websocket 配置
Configuration
public class WebSocketConfig implements WebSocketConfigurer {Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}4.测试 启动项目后在需要用到的地方通过导入websocket 包下的WebSocketServer 类来创建对象调用该对象的sendMessage 方法即可向客户端发送消息。
2. node Express 框架下使用 WebSocket
1.安装依赖 node下我们可以使用ws库来实现WebSocket服务端通过npm安装
npm i ws2. 创建WebSocket 创建一个websocket文件编写服务端代码
通过require 导入ws库。通过new 创建WebSocket服务并指定端口号这样会在当前服务的域名下创建一个WebSocket服务。通过on方法监听connection事件当客户端连接时触发该事件并执行回调函数。通过broadcast方法实现向所有客户广播消息实现了服务端向用户端推送消息。
const WebSocket require(ws);
const ws new WebSocket.Server({ port: 端口号 });ws.on(connection, function connection(ws) {// ws.send(hello)ws.clients.add(ws)});ws.broadcast function broadcast(data) {ws.clients.forEach((client) {if (client.readyState WebSocket.OPEN) {client.send(data);}});};
module.exports ws;
3. 配置 编写后将文件导出并在app.js中引入启动服务即可。
3. 客户端使用主要演示浏览器端
现在的主流浏览器均内置有WebSocket对象可以直接使用。
通过new WebSocket 创建WebSocket对象指定服务端地址。注意地址是ws://开头表示WebSocket协议。通过onopen方法监听连接成功事件通过send方法向服务端发送消息。通过onmessage方法监听服务端发送的消息通过onclose方法监听连接关闭事件。(这里可以接受到服务器返回的消息通过消息内容判断是否需要刷新页面等操作)通过onclose方法监听连接关闭事件。通过onclose方法监听连接关闭事件。 const ws new WebSocket(ws://localhost:指定端口)ws.onopen () {ws.send(hello)console.log(连接成功)
}ws.onmessage function (event) {// 解析数据console.log(event.data)
}ws.onclose function () {console.log(连接关闭)
}ws.onerror function (error) {console.error(WebSocket error: error)
}4.与http协议的区别
通信模式不同
HTTP是基于请求-响应模式的客户端发起请求服务器响应请求。每次通信都需要建立一个新的连接在HTTP/1.1中可以使用持久连接来减少开销但仍然是请求-响应模式。 WebSocket提供了全双工通信客户端和服务器可以在一个持久的连接上同时发送和接收数据不需要等待对方的响应。
持久性不同
HTTP每次请求都需要建立一个新的连接或者复用一个持久连接请求结束后连接通常会关闭。 WebSocket一旦建立连接会保持开放直到客户端或服务器决定关闭它。
适用场景不同
HTTP适用于需要请求数据的场景如网页浏览、文件下载、API调用等。 WebSocket适用于需要实时通信的场景如聊天应用、实时游戏、股票行情更新等。
安全性重点
HTTP可以通过HTTPS实现加密通信。 WebSocket可以通过WSSWebSocket Secure协议实现加密。
5. 安全Websocket 协议WSS
WebSocket SecureWSS是WebSocket协议的加密版本它在WebSocket的基础上增加了SSL/TLS层类似于HTTPS与HTTP的关系。WSS提供了数据传输的安全性确保了客户端和服务器之间传输的数据不会被窃听或篡改。以下是WSS的一些关键特点和使用场景
安全性WSS通过SSL/TLS对数据进行加密提供了针对窃听和中间人攻击的保护用户信任用户普遍更信任HTTPS连接因为浏览器中的“安全”指示符给人一种安全感合规性许多行业都有数据安全的监管要求WSS可以帮助满足这些要求。
WSS通常用于需要高安全性的实时通信场景例如在线银行、电子邮件和医疗记录等。在这些场景中数据的安全性和保密性至关重要因此使用WSS来确保数据传输的安全是必要的。
在配置WSS时通常需要设置SSL证书并确保服务器支持SSL/TLS加密。例如在Nginx中配置WSS需要监听443端口HTTPS的默认端口并配置SSL证书和密钥同时设置代理以将WSS请求转发到后端WebSocket服务。 注意 在浏览器端配置时如果网站的挂载服务配置的是https服务则网站中无法使用ws协议必须将ws升级为对应的wss协议。
nginx 配置wss服务 server {listen 443 ssl; # 监听 443 端口并启用 SSLserver_name localhost; # 网站域名ssl_certificate /path/to/your/certificate.crt; # 证书文件ssl_certificate_key /path/to/your/private.key; # 私钥文件location /websocket {proxy_pass http://backend; # 后端wss服务地址proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection upgrade;}
}
