springboot+vue+websocket实现在线聊天代码实现
时间: 2023-06-12 13:08:29 浏览: 251
这里是一个示例的Spring Boot + Vue.js + WebSocket的在线聊天应用程序的实现。首先,我们可以创建一个Spring Boot工程,然后添加WebSocket的依赖。
在pom.xml文件中添加以下依赖:
```xml
<dependencies>
<!-- ... -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
</dependencies>
```
接下来,我们可以编写一个WebSocket配置类,用于注册WebSocket端点和处理器:
```java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(new ChatWebSocketHandler(), "/chat");
}
}
```
这里我们注册了一个名为“chat”的WebSocket端点,并将其与一个处理器绑定。
接下来,我们可以编写一个WebSocket处理器类来处理来自客户端的消息:
```java
public class ChatWebSocketHandler extends TextWebSocketHandler {
private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();
@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) {
if (s.isOpen()) {
s.sendMessage(message);
}
}
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
sessions.remove(session);
}
}
```
这个处理器类中,我们定义了一个静态的WebSocketSession列表,用于存储所有连接到服务器的WebSocket会话。在`afterConnectionEstablished`方法中,我们将新的会话添加到列表中。在`handleTextMessage`方法中,我们遍历所有会话并将接收到的消息发送给它们。在`afterConnectionClosed`方法中,我们将关闭的会话从列表中删除。
最后,我们可以编写一个简单的HTML页面,在页面中使用Vue.js和WebSocket API来实现在线聊天功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Chat Room</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="message in messages">{{ message }}</div>
<input v-model="inputMessage" @keyup.enter="send">
</div>
<script>
var ws = new WebSocket("ws://" + window.location.host + "/chat");
var app = new Vue({
el: '#app',
data: {
messages: [],
inputMessage: ''
},
methods: {
send: function () {
ws.send(this.inputMessage);
this.inputMessage = '';
}
}
});
ws.onmessage = function (event) {
app.messages.push(event.data);
};
</script>
</body>
</html>
```
在这个HTML页面中,我们使用Vue.js来实现数据绑定和事件处理。我们还使用WebSocket API来连接到WebSocket服务器,并在收到消息时更新Vue.js的数据模型。在输入框中按下回车键时,我们将输入框中的内容发送到WebSocket服务器。
以上就是一个简单的Spring Boot + Vue.js + WebSocket的在线聊天应用程序的实现。
阅读全文