springboot websocket聊天室开发实例
时间: 2023-07-05 11:30:28 浏览: 81
好的,下面是一个简单的 Spring Boot + WebSocket 聊天室的开发实例:
1. 创建一个 Spring Boot 项目并添加以下依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
<version>0.45</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.5.0</version>
</dependency>
```
2. 创建一个 WebSocket 配置类,继承自 `WebSocketConfigurer` 接口,并实现其中的 `registerWebSocketHandlers` 方法,代码如下:
```java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new ChatWebSocketHandler(), "/chat").setAllowedOrigins("*");
}
}
```
上面的代码中,我们创建了一个 `ChatWebSocketHandler` 类来处理 WebSocket 的消息,并将其映射到 `/chat` 路径。
3. 创建一个 WebSocket 处理类 `ChatWebSocketHandler`,代码如下:
```java
public class ChatWebSocketHandler extends TextWebSocketHandler {
private List<WebSocketSession> sessions = new ArrayList<>();
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
sessions.add(session);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
for (WebSocketSession s : sessions) {
s.sendMessage(message);
}
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
sessions.remove(session);
}
}
```
上面的代码中,我们重写了 `TextWebSocketHandler` 类中的一些方法来处理 WebSocket 的连接、消息发送和断开连接。
4. 创建一个简单的 HTML 页面 `index.html`,代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
<link rel="stylesheet" href="/webjars/bootstrap/4.5.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>WebSocket Chat</h1>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="text" id="input" class="form-control" placeholder="请输入消息">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="messages"></div>
</div>
</div>
</div>
<script src="/webjars/jquery/3.5.1/jquery.min.js"></script>
<script src="/webjars/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script>
var socket = new WebSocket('ws://' + window.location.host + '/chat');
socket.onmessage = function (event) {
var message = event.data;
$('#messages').append('<p>' + message + '</p>');
};
$('#input').on('keydown', function (event) {
if (event.keyCode === 13) {
var message = $(this).val();
socket.send(message);
$(this).val('');
}
});
</script>
</body>
</html>
```
上面的代码中,我们使用了 Bootstrap 来美化页面,并使用了 jQuery 来操作 DOM。JavaScript 部分,我们创建了一个 WebSocket 对象连接到 `/chat` 路径,并在收到消息时将其显示在页面上。
5. 启动应用程序,访问 `http://localhost:8080/index.html`,在多个浏览器选项卡中打开页面并进行聊天。
以上就是一个简单的 Spring Boot + WebSocket 聊天室的开发实例。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)