当前位置： 首页 > article >正文

WebSocket简单使用

article 2024/11/1 19:31:24

1.WebSocket 简介

WebSocket 是一种网络通信协议，提供了在单个TCP连接上进行全双工通信的能力。这意味着客户端和服务器可以同时发送和接收数据，而不需要等待对方的回应。WebSocket 协议在2011年成为国际标准，并且被大多数现代浏览器所支持。

特点：

  1. 全双工通信：WebSocket 允许服务器主动向客户端发送消息，而不需要客户端先发送请求。这与HTTP协议不同，后者是请求-响应模式的。

  2. 持久连接：一旦WebSocket连接建立，它将保持开放状态，直到客户端或服务器决定关闭它。这减少了频繁建立和关闭连接的开销。

  3. 头部开销小：与HTTP相比，WebSocket的数据传输头部开销更小，因为它不需要像HTTP那样每次通信都发送请求和响应头。

  4. 适用性广泛：WebSocket适用于需要实时数据传输的应用，比如在线游戏、实时聊天应用、股票行情更新等。

  5. 安全性：WebSocket可以通过WSS（WebSocket Secure）协议实现加密，类似于HTTPS。

2. 服务端使用

1. java SpringBoot 框架下使用 WebSocket

1. 引入依赖
websocket 的maven 坐标：

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

2. 编写 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 {

    @OnOpen
    public void afterConnectionEstablished(Session session)  {
        System.out.println("连接成功");
    }

    @OnMessage
    protected void handleTextMessage(Session session, TextMessage message)  {
    
    }
    @OnClose
    public void afterConnectionClosed(Session session, CloseStatus status)  {
        System.out.println("连接关闭");
        super.afterConnectionClosed(session, status);
    }
}

3. 配置WebSocket
通过一个config类来统一注册websocket 配置

@Configuration
public class WebSocketConfig implements WebSocketConfigurer {

   @Bean
   public ServerEndpointExporter serverEndpointExporter() {
      return new ServerEndpointExporter();
      }
}

4.测试
启动项目后，在需要用到的地方通过导入websocket 包下的WebSocketServer 类来创建对象，调用该对象的sendMessage 方法即可向客户端发送消息。

2. node Express 框架下使用 WebSocket

1.安装依赖
node下我们可以使用ws库来实现WebSocket服务端，通过npm安装：

npm i ws

2. 创建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协议的区别

  1. 通信模式不同

HTTP：是基于请求-响应模式的，客户端发起请求，服务器响应请求。每次通信都需要建立一个新的连接（在HTTP/1.1中，可以使用持久连接来减少开销，但仍然是请求-响应模式）。
WebSocket：提供了全双工通信，客户端和服务器可以在一个持久的连接上同时发送和接收数据，不需要等待对方的响应。

  1. 持久性不同：

HTTP：每次请求都需要建立一个新的连接（或者复用一个持久连接），请求结束后连接通常会关闭。
WebSocket：一旦建立，连接会保持开放，直到客户端或服务器决定关闭它。

  1. 适用场景不同：

HTTP：适用于需要请求数据的场景，如网页浏览、文件下载、API调用等。
WebSocket：适用于需要实时通信的场景，如聊天应用、实时游戏、股票行情更新等。

  1. 安全性（重点）：

HTTP：可以通过HTTPS实现加密通信。
WebSocket：可以通过WSS（WebSocket Secure）协议实现加密。

5. 安全Websocket 协议（WSS）

WebSocket Secure（WSS）是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 端口，并启用 SSL
    server_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";
    }
}

http://www.kler.cn/a/374813.html

相关文章：

  • 界面控件DevExpress WPF中文教程：Data Grid——卡片视图概述
  • 【数据结构二叉树】补充：C实现二叉树的层次遍历
  • 17. 云计算和分布式计算
  • 蓝牙BLE开发——红米手机无法搜索蓝牙设备？
  • ApplicationListener＜ContextRefreshedEvent＞ 的使用和作用
  • ROS（快速初步入门）
  • Python实现图像（边缘）锐化：梯度锐化、Roberts 算子、Laplace算子、Sobel算子的详细方法
  • 【PythonWeb开发】Flask-RESTful字段格式化
  • C语言常见进制 （二进制、八进制、十进制、十六进制）详解
  • uniapp使用echart
  • Litctf-web
  • Docker（二）：Docker的基本使用
  • 从0攒一个分布大数据/人工智能/数据库 处理引擎
  • 躺平成长-下一个更新的数据（躺平成长数据显示核心）
  • 【计算机网络 - 基础问题】每日 3 题（六十）
  • Make a Windows service publicly accessible
  • IDEA控制台报错(org.springframework.http.converter.HttpMessageNotWritableException)
  • 信息论与熵information and entropy
  • Linux：线程池
  • ADT和ADT接口
  • 【Fargo】21：rtcp rr 问答
  • 手机玩亚托莉：我挚爱的时光！手机推gal、躺床玩漫改gal教程
  • 龙迅#LT6211适用于HDMI转4PORT LVDS,分辨率高达4K60HZ,可提供技术支持!
  • 【C++刷题】力扣-#561-数组拆分
  • 【Linux刷题练习】
  • 线上3D看车有何优势？