使用WebSocket构建实时聊天室
16 浏览量
更新于2024-09-01
收藏 91KB PDF 举报
"WebSocket 实现聊天室业务是一个利用 WebSocket 技术构建实时通信的应用场景，常见于在线聊天、实时通知等交互式应用。本示例提供了详细的代码实现，旨在帮助开发者理解如何在 Spring Boot 框架下创建一个简单的 WebSocket 聊天室。关键依赖包括 `spring-boot-starter-websocket`、`spring-boot-starter-web` 和 `spring-boot-starter-thymeleaf` 等，用于支持 WebSocket 连接、HTTP 服务和模板引擎。此外，还引入了 Webjars 库以支持前端界面的构建，如 mdui 和 jQuery。"
WebSocket 是一种在客户端和服务器之间建立长连接的协议，它允许双方进行全双工通信，即数据可以在任意方向上双向传输。在 WebSocket 的应用中，一旦连接建立，就可以避免传统的 HTTP 请求-响应模式带来的延迟，提高了实时性。
在 Spring Boot 中使用 WebSocket，首先需要配置 WebSocket 的端点。这通常通过实现 `WebSocketHandler` 接口或使用 `@MessageMapping` 注解的方法来完成。例如：
```java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(chatHandler(), "/chat")
.addInterceptors(new HandshakeInterceptor());
}
@Bean
public WebSocketHandler chatHandler() {
return new ChatWebSocketHandler();
}
}
@Service
public class ChatWebSocketHandler extends TextWebSocketHandler {
private final Set<WebSocketSession> sessions = new CopyOnWriteArraySet<>();
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
sessions.add(session);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws IOException {
for (WebSocketSession other : sessions) {
if (!other.equals(session)) {
other.sendMessage(message);
}
}
}
// 其他相关处理方法，如断开连接时的处理等
}
```
在这个例子中，`ChatWebSocketHandler` 类处理了与客户端的连接建立和消息传递。`afterConnectionEstablished` 方法在连接建立后将新会话添加到会话集合中，而 `handleTextMessage` 方法则将接收到的消息广播给所有已连接的客户端。
前端部分，通常使用 JavaScript 或者相关的库（如 jQuery）来处理 WebSocket 连接的建立、消息发送和接收。以下是一个基本的 JavaScript 示例：
```html
<!DOCTYPE html>
<html>
<head>
<script src="/webjars/jquery/3.3.1/jquery.min.js"></script>
<script src="/webjars/mdui/0.4.0/dist/js/mdui.min.js"></script>
</head>
<body>
<input type="text" id="messageInput">
<button id="sendMessage">发送</button>
<ul id="chatMessages"></ul>
<script>
var socket = new WebSocket("ws://" + window.location.host + "/chat");
socket.onopen = function() {
console.log('WebSocket 连接已建立');
};
socket.onmessage = function(event) {
var message = JSON.parse(event.data);
$('#chatMessages').append('<li>' + message.content + '</li>');
};
socket.onclose = function() {
console.log('WebSocket 连接已关闭');
};
$('#sendMessage').on('click', function() {
var messageContent = $('#messageInput').val();
socket.send(JSON.stringify({ content: messageContent }));
$('#messageInput').val('');
});
</script>
</body>
</html>
```
这个 HTML 页面中，JavaScript 代码创建了一个 WebSocket 对象，并定义了连接打开、消息接收和关闭时的回调函数。用户输入的消息会被发送到服务器，而接收到的服务器消息则显示在聊天窗口中。
总结来说，WebSocket 实现聊天室业务的核心是使用 WebSocket 协议建立持久连接，配合 Spring Boot 提供的框架支持，以及前端 JavaScript 处理消息的收发，实现了一个实时的聊天环境。通过这种方式，开发者可以创建更高效、交互性更强的 Web 应用。
WebSocket实现聊天室业务实现聊天室业务
主要为大家详细介绍了WebSocket实现聊天室业务，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙
伴们可以参考一下
WebSocket实现聊天室业务的具体代码，供大家参考，具体内容如下
页面效果图页面效果图
pom.xml
主要是spring-boot-starter-websocket包，websocket连接、发送信息。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency><!--Webjars版本定位工具-->
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
<dependency>
<groupId>org.webjars.npm</groupId>
<artifactId>mdui</artifactId>
<version>0.4.0</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.49</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
前台前台
下载后可阅读完整内容，剩余5页未读，立即下载
2020-08-10 上传
2019-03-04 上传
2021-01-20 上传
2018-08-05 上传
146 浏览量
2018-01-29 上传
2017-12-22 上传
2019-04-17 上传
2020-12-19 上传
weixin_38696582
- 粉丝: 5
- 资源: 953
我的内容管理
展开
最新资源
- 正整数数组验证库：确保值符合正整数规则
- 系统移植工具集：镜像、工具链及其他必备软件包
- 掌握JavaScript加密技术：客户端加密核心要点
- AWS环境下Java应用的构建与优化指南
- Grav插件动态调整上传图像大小提高性能
- InversifyJS示例应用：演示OOP与依赖注入
- Laravel与Workerman构建PHP WebSocket即时通讯解决方案
- 前端开发利器：SPRjs快速粘合JavaScript文件脚本
- Windows平台RNNoise演示及编译方法说明
- GitHub Action实现站点自动化部署到网格环境
- Delphi实现磁盘容量检测与柱状图展示
- 亲测可用的简易微信抽奖小程序源码分享
- 如何利用JD抢单助手提升秒杀成功率
- 快速部署WordPress：使用Docker和generator-docker-wordpress
- 探索多功能计算器：日志记录与数据转换能力
- WearableSensing: 使用Java连接Zephyr Bioharness数据到服务器
