Spring Boot 结合 WebSocket 实现在线聊天(1)

今天我们就来看看如何在 Spring Boot 中结合 WebSocket 实现点对点在线聊天。

1.WebSocket 简介


1.1 HTTP/1.1 的升级特性

要说 WebSocket 协议,我们得先来说说 HTTP 协议的一个请求头,事实上,所有的 HTTP 客户端(浏览器、移动端等)都可以在请求头中包含 Connection:Upgrade ,这个表示客户端希望升级请求协议,那么希望升级成什么样的协议呢?我们需要在 Upgrade 头中指定一个或者多个协议的列表,当然这些协议必须兼容 HTTP/1.1 协议。服务器收到请求之后,如果接受升级请求,那么将会返回一个 101 的状态码,表示转换请求协议,同时在响应的 Upgrade 头中使用单个值,这个单个值就是请求协议列表中服务器支持的第一个协议(即请求头的 Upgrade 字段中列出来的协议列表中服务器支持的第一个协议)。

HTTP 升级最大的好处是最终使我们可以使用任意的协议,在升级握手完成之后,它就不再使用 HTTP 连接了,我们甚至可以在升级握手完成之后建立一个 Socket 连接,理论上我们可以使用 HTTP 升级在两个端点之间使用任何自己设计的协议,进而创建出各种各样的 TCP 通信,当然浏览器不会让开发者随意去这么做,而是要指定某些协议,WebSocket 应运而生!

大家来看松哥之前制作的一张图,这里详细解释了 websocket 协议升级的过程:

640?wx_fmt=png

1.2 WebSocket 协议

OK,了解了 HTTP/1.1 协议的升级特性之后,我们再来详细看看整个过程是怎么样的?

一个 WebSocket 请求首先使用非正常的 HTTP 请求以特定的模式访问一个 URL ,这个 URL 有两种模式,分别是 ws 和 wss,对应 HTTP 协议中的 http 和 https,请求头中除了 Connection:Upgrade 之外还有一个 Upgrade:websocket ,它们两个将共同告诉服务器将连接升级为 WebSocket 这样一种全双工协议。

如此,在握手完成之后,文本消息或者其他二进制消息就可以同时在两个方向上进行发送,而不需要关闭和重建连接。此时的客户端和服务端关系其实是对等的,他们都可以互相向对方主动发消息。

注意

ws 和 wss 模式并不能算作 HTTP 协议的一部分,因为 HTTP 请求和请求头并不包含 URL 模式,HTTP 请求只在请求的第一行中包含相对于服务器的 URL ,在 Host 头中包含域名,而 WebSocket 中特有的 ws 和 wss 模式主要用于通知浏览器和 API 是希望使用 SSL/TLS(wss),还是希望使用不加密的方式(ws)进行连接。

1.3 WebSocket 的优势

说了这么多,

真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】

那么接下来我们来看看 WebSocket 协议都有哪些优势:

  1. 由于 WebSocket 连接在端口80(ws)或者443(wss)上创建,与 HTTP 使用的端口相同,这样,基本上所有的防火墙都不会阻塞 WebSocket 连接

  2. WebSocket 使用 HTTP 协议进行握手,因此它可以自然而然的集成到网络浏览器和 HTTP 服务器中

  3. 使用该协议,当消息启动或者到达的时候,服务端和客户端都可以知道

等等,还有很多。

1.4 WebSocket 的用途

凡是涉及到即时通讯的,基本上都能用上它:

  1. 网页上的在线聊天

  2. 多人在线游戏

  3. 在线股票网站

  4. 在线即时新闻网站

  5. 高清视频流

  6. 应用集群之间的通信

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析

虽只说了一个公司的面试,但我们可以知道大厂关注的东西并举一反三,通过一个知识点延伸到另一个知识点,这是我们要掌握的学习方法,小伙伴们在这篇有学到的请评论点赞转发告诉小编哦,谢谢大家的支持!

  • 14
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
1. 添加依赖 首先,在 `pom.xml` 文件中添加 `spring-boot-starter-websocket` 依赖: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 配置WebSocket 在 `Application` 类中,添加 `@EnableWebSocket` 注解开启WebSocket支持,并实现 `WebSocketConfigurer` 接口: ``` @SpringBootApplication @EnableWebSocket public class Application implements WebSocketConfigurer { public static void main(String[] args) { SpringApplication.run(Application.class, args); } @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new WebSocketHandler(), "/chat").setAllowedOrigins("*"); } } ``` 这里创建了一个名为 `chat` 的WebSocket处理器,并指定允许所有来源的连接。 3. 编写WebSocketHandler 创建 `WebSocketHandler` 类,并实现 `WebSocketHandler` 接口: ``` public class WebSocketHandler implements org.springframework.web.socket.WebSocketHandler { private static final Logger logger = LoggerFactory.getLogger(WebSocketHandler.class); private final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { logger.info("New session connected: " + session.getId()); sessions.add(session); } @Override public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { logger.info("Received message: " + message.getPayload()); for (WebSocketSession s : sessions) { s.sendMessage(message); } } @Override public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception { logger.error("Error in transport", exception); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception { logger.info("Session closed: " + session.getId()); sessions.remove(session); } @Override public boolean supportsPartialMessages() { return false; } } ``` 这里定义了一个静态的 `sessions` 列表,用于保存所有连接的WebSocket会话。在 `afterConnectionEstablished` 方法中,将新建立的会话添加到 `sessions` 列表中。在 `handleMessage` 方法中,遍历所有WebSocket会话,将接收到的消息发送给所有客户端。 4. 编写前端页面 在 `resources/static` 目录下创建一个 `index.html` 文件,用于展示聊天室页面,并实现WebSocket的连接和发送消息功能: ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> var ws; function connect() { var username = $("#username").val(); if (!username) { alert("Please enter your username!"); return; } ws = new WebSocket("ws://" + location.host + "/chat"); ws.onopen = function(event) { console.log("WebSocket opened: " + event); ws.send(username + " joined the chat."); }; ws.onmessage = function(event) { console.log("WebSocket message received: " + event.data); $("#messages").append($("<li>").text(event.data)); }; ws.onerror = function(event) { console.error("WebSocket error: " + event); }; ws.onclose = function(event) { console.log("WebSocket closed: " + event); $("#messages").append($("<li>").text("WebSocket connection closed.")); }; } function send() { var message = $("#message").val(); if (!message) { alert("Please enter your message!"); return; } ws.send($("#username").val() + ": " + message); $("#message").val(""); } </script> </head> <body> <h1>WebSocket Chat</h1> <div> <label>Username:</label> <input type="text" id="username"> <button onclick="connect()">Connect</button> </div> <div> <label>Message:</label> <input type="text" id="message"> <button onclick="send()">Send</button> </div> <ul id="messages"></ul> </body> </html> ``` 在页面加载时,通过 `WebSocket` 构造函数创建一个WebSocket对象,并指定连接的URL。在连接建立后,通过 `send` 方法向服务器发送消息。在接收到消息时,在页面上显示消息内容。 5. 启动应用 最后,运行 `Application` 类的 `main` 方法启动应用。访问 `http://localhost:8080`,即可进入聊天室页面。输入用户名后点击 `Connect` 按钮连接WebSocket服务器,即可开始聊天

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值