WebSocket简单使用

1.WebSocket 简介

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

特点：

全双工通信：WebSocket 允许服务器主动向客户端发送消息，而不需要客户端先发送请求。这与HTTP协议不同，后者是请求-响应模式的。
持久连接：一旦WebSocket连接建立，它将保持开放状态，直到客户端或服务器决定关闭它。这减少了频繁建立和关闭连接的开销。
头部开销小：与HTTP相比，WebSocket的数据传输头部开销更小，因为它不需要像HTTP那样每次通信都发送请求和响应头。
适用性广泛：WebSocket适用于需要实时数据传输的应用，比如在线游戏、实时聊天应用、股票行情更新等。
安全性：WebSocket可以通过WSS（WebSocket Secure）协议实现加密，类似于HTTPS。

2. 服务端使用

1. java SpringBoot 框架下使用 WebSocket

1. 引入依赖

websocket 的maven 坐标：

xml 复制代码

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

2. 编写 WebSocket

在项目下创建一个websocket 包，创建WebSocketServer 类
通过@Component 注解将该类交给spring 管理
通过@ServerEndpoint 注解将该类声明为websocket 服务端并通过参数指定访问路径

java 复制代码

@Component
@ServerEndpoint("/websocket") // 声明为websocket 服务端并通过参数指定访问路径
public class WebSocketServer extends TextWebSocketHandler {

}

接下来需要为类编写三个主要的方法，用于处理客户端的连接、消息和关闭

@OnOpen 注解的方法用于处理客户端的连接
@OnMessage 注解的方法用于处理客户端发送的消息
@OnClose 注解的方法用于处理客户端的关闭

java 复制代码

@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 配置

java 复制代码

@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安装：

shell 复制代码

npm i ws

2. 创建WebSocket

创建一个websocket文件，编写服务端代码：

通过require 导入ws库。
通过new 创建WebSocket服务，并指定端口号，这样会在当前服务的域名下创建一个WebSocket服务。
通过on方法监听connection事件，当客户端连接时触发该事件，并执行回调函数。
通过broadcast方法实现向所有客户广播消息，实现了服务端向用户端推送消息。

js 复制代码

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方法监听连接关闭事件。

js 复制代码

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：可以通过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服务

bash 复制代码

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";
    }
}