当前位置： 首页 > 编程日记 > 正文

WebSocket 入门实战

编程日记 2024-01-18 16:22:03

1. 引言

WebSocket 是一种在单个 TCP 连接上提供全双工通信的协议，允许客户端和服务器之间实时、双向地进行数据交换。WebSocket 的引入使得 Web 应用程序能够更轻松地实现实时通信，如在线聊天、实时数据更新等。本文将介绍 WebSocket 的使用场景以及通过 Java 进行 WebSocket 编程的实例。

2. WebSocket 使用场景

WebSocket 在以下场景中非常有用：

  1. 实时聊天应用程序： WebSocket 提供了一种实时通信的方式，使得在线聊天应用程序能够实时地传递消息。

  2. 实时数据更新： 对于需要在客户端和服务器之间共享实时数据的应用程序，例如股票市场行情、在线游戏状态等。

  3. 协作应用程序： 在协作工具中，用户可以实时共享文档、图像等内容。

  4. 实时提醒和通知： 通过 WebSocket，服务器可以即时地向客户端推送通知，而不需要客户端不断地轮询。

3. Java代码示例

下面通过一个简单的 Java 示例来演示如何使用 Spring Boot 和 Spring WebSocket 来创建一个基本的 WebSocket 服务。

1. 创建 Spring Boot 项目

引入websocket-starter

 <!-- Spring Boot Starter WebSocket -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-websocket</artifactId>
    </dependency>

2. 编写 WebSocket 配置

创建一个 WebSocket 配置类，用于配置和启用 WebSocket：

// WebSocketConfig.java
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/websocket-example").withSockJS();
    }
}

这个配置类配置了基本的消息代理，使得消息可以在客户端和服务器之间进行传递。

3. 创建 WebSocket 控制器

创建一个简单的 WebSocket 控制器，用于处理 WebSocket 消息：

// WebSocketController.java
@Controller
public class WebSocketController {

    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Greeting greeting(HelloMessage message) throws Exception {
        Thread.sleep(1000); // 模拟处理时间
        return new Greeting("Hello, " + message.getName() + "!");
    }
}

4. 创建消息模型

创建用于传递消息的模型类：

// HelloMessage.java
public class HelloMessage {

    private String name;

    // Getter and Setter
}


// Greeting.java
public class Greeting {

    private String content;

    public Greeting(String content) {
        this.content = content;
    }

    // Getter
}

5. 编写前端页面

在前端页面使用 JavaScript 来处理 WebSocket 连接，创建一个test.html，写入以下代码

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

</head>
<body>
    <div>
        <label for="name">Enter your name: </label>
        <input type="text" id="name" />
        <button onclick="connect()" id='connect'>Connect</button>
        <hr />
        <textarea id="messages" cols="40" rows="10" readonly></textarea>
        <hr />
        <label for="message">Message: </label>
        <input type="text" id="message" />
        <button onclick="sendMessage()">Send</button>
    </div>

    <script>
        var stompClient = null;

        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
        }

        function connect() {
            // 注意端口号
            var socket = new SockJS('http://localhost:8090/websocket-example');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, function (frame) {
                setConnected(true);
			
                stompClient.subscribe('/topic/greetings', function (greeting) {
					console.log("receive websocket server msg:",greeting)
                    showGreeting(JSON.parse(greeting.body).content);
                });
            });
        }

        function disconnect() {
            if (stompClient !== null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log('Disconnected');
        }

        function sendMessage() {
            var message = document.getElementById('message').value;
            stompClient.send("/app/hello", {}, JSON.stringify({ 'name': message }));
        }

        function showGreeting(message) {
            var textarea = document.getElementById('messages');
            textarea.value += message + '\n';
        }
    </script>
</body>
</html>

注意，如果是直接打开上面的html页面，调用后端服务会存在跨域问题，需要用配置了跨域的谷歌浏览器打开才能使用。

6. 运行应用程序

运行 Spring Boot 应用程序，并访问

4. 总结

这个简单示例演示了如何使用 Spring Boot 和 Spring WebSocket 创建一个基本的 WebSocket 服务。通过这个例子，可以了解 WebSocket 在实时通信中的应用，如果大家在平时工作当中有遇到需要实时推送的场景，比如大屏实时展示数据变化，就可以用这种发放时。

websocket网络协议

https://www.dkcj.cn/info/751.html

相关文章：

TCP服务器最多支持多少客户端连接

本文从理论和实际两个方面介绍了一个 TCP 服务器支持的最大连接数

编程日记2024/01/24 22:10:29

websocket服务端本地部署

即登录cpolar官网后，点击预留，保留一个固定tcp端口地址，然后将其配置到相应的隧道中即可。这里我们用cpolar内网穿透来映射内网端口，它支持http/https/tcp协议，不限制流量，无需公网ip，也不用设置路由器，操作简单。注意:该隧道选择的是临时tcp地址和端口,24小时内会变化,如需固定tcp地址,可升级为专业套餐做tcp地址固定!cpolar安装成功后，默认会配置两个默认隧道：一个ssh隧道和一个website隧道，可自行删减或者修改。，可以查看到token码，复制并执行命令进行认证。

编程日记2024/01/23 18:03:57

Golang 搭建 WebSocket 应用（八） - 完整代码

本文应该是本系列文章最后一篇了，前面留下的一些坑可能后面会再补充一下，但不在本系列文章中了。

编程日记2024/01/21 15:47:51

TCP怎么保证传输过程的可靠性？

校验和发送方在发送数据之前计算校验和，接收方收到数据后同样计算，如果不一致，那么传输有误确认应答,序列号TCP进行传输时数据都进行了编号，每次接收方返回ACK都有确认序列号。超时重试这里是引用连接管理流量控制阻塞控制..._tcp传输过程可靠性

编程日记2024/01/16 00:56:58

揭秘代理IP：原理、类型及其在大数据抓取中的作用

代理IP的原理：代理服务器作为客户端与目标网站之间的中介，当请求数据时，不是直接由用户的原始IP地址发送到目标网站，而是先发送到代理服务器。- 提升抓取效率：利用多个代理IP实现并发抓取，可以分散请求负载，提高数据采集速度，尤其是在需要大量数据或高频率访问时尤为关键。- 地域定位：某些代理IP能够提供特定地区的IP地址，这使得爬虫能够抓取特定区域的内容，比如针对不同国家或地区的本地化信息。- 绕过反爬机制：通过不断更换代理IP，爬虫可以避免因频繁访问而触发目标网站的反爬策略，从而继续高效地抓取数据。

编程日记2024/01/13 00:39:57

websocket介绍并模拟股票数据推流

Websockt是一种网络通信协议，允许客户端和服务器双向通信。最大的特点就是允许服务器主动推送数据给客户端，比如股票数据在客户端实时更新，就能利用websocket。

编程日记2024/01/11 14:12:00

什么？Postman也能测WebSocket接口了？

作为一位过来人也是希望大家少走一些弯路，如果你不想再体验一次学习时找不到资料，没人解答问题，坚持几天便放弃的感受的话，在这里我给大家分享一些自动化测试的学习资源，希望能给你前进的路上带来帮助。

编程日记2024/01/09 18:17:27

TCP中的三次握手和四次挥手

我们知道TCP是运输层的面向连接的可靠的传输协议。**面向连接的**，指的就是在两个进程发送数据之前，必须先相互“握手”，确保两进程可以进行连接。并且这个传输是点对点的，即一个TCP连接中只有一个发送方和接收方；**可靠的**，指的是在任何网络情况下，在TCP传输中数据都将完整的发送到接收方。

编程日记2024/01/04 10:10:38

springboot对接WebSocket实现消息推送

项目上线需要https请求，把请求地址换成wss，需要通过nginx配置转发，再443端口加上如下配置。请求地址更换成wss://域名/wss/websocket/或者播放指定的音频文件，播放音频需要浏览器设置可以发放声音。2.增加配置WebSocketConfig.java。7.增加消息推送语音播放_文本转语音。3.创建一个WebSocket实例。6.前端对接WebSocket。4.修改启动类，添加注解。8.如何修改成wss请求。5.测试一下推送消息。

编程日记2023/12/31 08:41:59

Nodejs+Express搭建HTTPS服务

最近开发需要搭建一个https的服务，正好最近在用nodejs和express，于是乎想到就近就使用这两东西来搭建一个https的服务吧。这里搭建过程总共需要两步，第一步生成证书，第二步使用https模块启动服务。

编程日记2023/12/27 17:56:37

软路由R4S+iStoreOS如何实现公网远程桌面本地电脑

本文主要讲解如何使用软路由R4S和iStoreOS实现公网远程桌面本地电脑

编程日记2023/12/12 16:00:07

【HTTP协议】简述HTTP协议的概念和特点

HTTP（Hypertext Transfer Protocol）是一种用于在Web上进行数据通信的协议。它是基于客户端-服务器模型的，其中客户端发送请求，服务器返回响应。

编程日记2023/12/02 11:17:10