java和vue前端搭建websocket
时间: 2023-12-05 18:50:37 浏览: 30
1. Java后端搭建WebSocket
Java后端可以使用Spring Boot和Spring WebSocket来搭建WebSocket。以下是一个简单的例子:
首先,需要添加依赖:
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
```
然后,在Spring Boot的Application类中添加@EnableWebSocket注解:
```java
@SpringBootApplication
@EnableWebSocket
public class Application {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
}
```
接下来,创建一个WebSocket处理器:
```java
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// 处理消息
}
}
```
最后,在配置类中配置WebSocket:
```java
@Configuration
public class WebSocketConfig implements WebSocketConfigurer {
@Autowired
private MyWebSocketHandler myWebSocketHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(myWebSocketHandler, "/ws").setAllowedOrigins("*");
}
}
```
现在,Java后端的WebSocket已经搭建完成了。
2. Vue前端搭建WebSocket
在Vue前端中,可以使用WebSocket API来搭建WebSocket。以下是一个简单的例子:
首先,创建一个WebSocket实例:
```javascript
var socket = new WebSocket("ws://localhost:8080/ws");
```
这里的地址是Java后端WebSocket的地址。
然后,监听WebSocket的事件:
```javascript
socket.onopen = function() {
// 连接成功
};
socket.onmessage = function(event) {
// 收到消息
};
socket.onclose = function(event) {
// 连接关闭
};
socket.onerror = function(event) {
// 连接出错
};
```
最后,发送消息:
```javascript
socket.send("Hello, WebSocket!");
```
现在,Vue前端的WebSocket也已经搭建完成了。