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

WebSocket和长轮询

news 来源：原创 2025/5/14 17:44:07

WebSocket 原理与实现

原理

WebSocket 是一种在单个TCP连接上进行全双工通信的协议。它允许服务器主动向客户端推送数据，而不需要客户端发起请求。一旦连接建立，客户端和服务器可以随时互相发送消息。

  1. 握手阶段：客户端通过HTTP请求升级到WebSocket协议。
  2. 数据传输阶段：一旦握手成功，双方可以通过TCP连接进行双向通信。
  3. 关闭阶段：当不再需要通信时，任意一方可以关闭连接。
实现步骤
  1. 添加依赖：在pom.xml中添加Spring Boot WebSocket依赖。
  2. 配置WebSocket：创建一个配置类来注册WebSocket处理器。
  3. 实现处理器：创建一个处理器类来处理WebSocket消息。
  4. 启动应用：创建Spring Boot启动类。
  5. 前端页面：编写HTML页面，使用JavaScript与WebSocket服务器进行通信。
代码示例
后端（ Spring Boot）
package com.example.websocketdemo.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(new MyWebSocketHandler(), "/ws").setAllowedOrigins("*");
    }
}

package com.example.websocketdemo.handler;

import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

import java.io.IOException;
import java.util.HashSet;
import java.util.Set;

public class MyWebSocketHandler extends TextWebSocketHandler {

    private final Set<WebSocketSession> sessions = new HashSet<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("客户端已连接: " + session.getId());
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("收到消息: " + message.getPayload());

        for (WebSocketSession sess : sessions) {
            try {
                sess.sendMessage(new TextMessage("服务器已收到: " + message.getPayload()));
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("客户端已断开连接: " + session.getId());
        sessions.remove(session);
    }
}

package com.example.websocketdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class WebSocketDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(WebSocketDemoApplication.class, args);
    }
}
前端（HTML + JavaScript）
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>WebSocket 示例</title>
</head>
<body>
    <h1>WebSocket 示例</h1>
    <input type="text" id="messageInput" placeholder="输入消息">
    <button onclick="sendMessage()">发送消息</button>
    <div id="messages"></div>

    <script>
        const socket = new WebSocket('ws://localhost:8080/ws');

        socket.addEventListener('open', function (event) {
            console.log('已连接到服务器');
        });

        socket.addEventListener('message', function (event) {
            console.log('收到消息:', event.data);
            document.getElementById('messages').innerHTML += `<p>${event.data}</p>`;
        });

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value;
            if (message.trim()) {
                socket.send(message);
                input.value = '';
            }
        }
    </script>
</body>
</html>

长轮询 原理与实现

原理

长轮询是一种模拟服务器推送的技术。客户端向服务器发送一个请求，服务器会保持这个连接打开，直到有新的数据可用或者超时。一旦服务器返回响应，客户端立即再次发起请求以保持连接。

  1. 客户端发起请求：客户端发送HTTP请求到服务器。
  2. 服务器等待数据：服务器保持连接打开，直到有新数据或超时。
  3. 服务器返回响应：一旦有新数据或超时，服务器返回响应。
  4. 客户端处理响应并重新发起请求：客户端处理响应并立即发起新的请求。
实现步骤
  1. 创建控制器：编写一个控制器来处理长轮询请求和数据更新请求。
  2. 启动应用：创建Spring Boot启动类。
  3. 前端页面：编写HTML页面，使用JavaScript发起长轮询请求和发送更新数据。
代码示例
后端（Spring Boot）
package com.example.longpollingdemo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.TimeUnit;

@RestController
public class LongPollingController {

    private final ConcurrentHashMap<String, String> dataStore = new ConcurrentHashMap<>();
    private final Object lock = new Object();

    @GetMapping("/poll")
    public String poll(@RequestParam(value = "timeout", defaultValue = "5000") long timeout) throws InterruptedException {
        synchronized (lock) {
            if (dataStore.isEmpty()) {
                lock.wait(timeout);  // 等待新数据或超时
            }
            return dataStore.pollFirstEntry().getValue();  // 返回第一条数据并移除
        }
    }

    @PostMapping("/update")
    public String update(@RequestParam String data) {
        synchronized (lock) {
            dataStore.put("latest", data);  // 存储新数据
            lock.notifyAll();  // 通知等待的线程
        }
        return "数据更新成功";
    }
}

package com.example.longpollingdemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class LongPollingDemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(LongPollingDemoApplication.class, args);
    }
}
前端（HTML + JavaScript）
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>长轮询 示例</title>
</head>
<body>
    <h1>长轮询 示例</h1>
    <button onclick="sendUpdate()">发送更新</button>
    <div id="messages"></div>

    <script>
        let polling = false;

        function pollServer() {
            if (!polling) {
                polling = true;
                fetch('/poll?timeout=5000')
                    .then(response => response.text())
                    .then(data => {
                        document.getElementById('messages').innerHTML += `<p>收到数据: ${data}</p>`;
                        polling = false;
                        pollServer();  // 立即发起新的请求
                    })
                    .catch(error => console.error('Error:', error));
            }
        }

        function sendUpdate() {
            const newData = prompt('请输入要发送的数据:');
            fetch(`/update?data=${newData}`, { method: 'POST' })
                .then(response => response.text())
                .then(result => console.log(result))
                .catch(error => console.error('Error:', error));
        }

        // 初始调用
        pollServer();
    </script>
</body>
</html>

WebSocket 和长轮询的区别

特性WebSocket长轮询
连接类型持久连接短暂连接
通信方式全双工通信单向通信
延迟低延迟较高延迟
资源消耗相对较低相对较高
适用场景实时交互性强的应用，如聊天、游戏不支持WebSocket的老式浏览器
复杂度较高较低
兼容性需要浏览器和服务器的支持广泛支持

注意事项

WebSocket 注意事项
  1. 安全性：确保使用WSS（WebSocket Secure）协议进行加密通信。
  2. 心跳检测：定期发送心跳包以保持连接活跃，防止网络中断导致连接失效。
  3. 错误处理：处理连接失败、重连等异常情况。
  4. 负载均衡：在分布式环境中，确保WebSocket连接能够正确路由到正确的服务器实例。
长轮询 注意事项
  1. 超时设置：合理设置超时时间，避免过长时间的等待影响用户体验。
  2. 并发控制：限制同时发起的请求数量，避免服务器压力过大。
  3. 错误处理：处理请求失败、超时等情况，并提供重试机制。
  4. 性能优化：尽量减少不必要的请求次数，提高响应速度。

总结

  • WebSocket 提供了高效的全双工通信机制，适用于实时性要求高的应用场景，但实现相对复杂，需要考虑安全性和稳定性。
  • 长轮询 是一种简单有效的模拟服务器推送技术，适用于不支持WebSocket的老式浏览器或简单应用场景，但存在较高的延迟和资源消耗问题。

根据具体需求选择合适的技术方案，如果需要高效实时通信且支持现代浏览器，建议使用WebSocket；如果需要兼容性广且实现简单，可以选择长轮询。

相关文章：

  • 【操作系统】Ch6 文件系统
  • 【最后203篇系列】015 几种消息队列的思考
  • ORA-00600错误的深度剖析：如何避免与解决？
  • 蓝桥杯宝石，考察数学。考察公式推导能力
  • 设计模式(行为型)-命令模式
  • 【MySQL】MySQL数据存储机制之存储引擎
  • Vim 编辑器-实现基础跳转
  • MCP 开放协议
  • 55-交换机堆叠
  • P4924 [1007] 魔法少女小Scarlet
  • 模板初阶：
  • 判断一个数是否是质数（素数）
  • 【递归与动态规划(DP) C/C++】（1）递归 与 动态规划(DP)
  • 图书管理借阅系统（豪华版）
  • python二级每日十题(1)
  • css盒子模型第二章(margin padding border content)
  • 从零开始 | C语言基础刷题DAY3
  • 深入解析Hosts文件：从原理到实战应用(文末附Qwins下载）
  • Couldn‘t install PSEXESVC service: 拒绝访问。
  • 宇树科技纯技能要求总结
  • 崔登荣任国家游泳队总教练
  • 中国女足将于5月17日至6月2日赴美国集训并参加邀请赛
  • 《AI×SCIENCE十大前沿观察》9：合成数据和数据基础设施
  • 港股持续拉升：恒生科技指数盘中涨幅扩大至6%，恒生指数涨3.3%
  • 1至4月我国汽车产销量首次双超千万辆
  • 乘联分会：上半年车市价格竞争温和，下半年价格战或再开启