1.前端
data(){
return{
websocket:null
}
},
mounted() {
this.initWebSocket();
},
methods:{
//加载WebSocket
initWebSocket(){
if ('WebSocket' in window){
this.websocket = new WebSocket("ws://192.168.43.13:9001/mj/webSocket");
this.websocket.onopen = (event)=>{
console.log("建立连接",event)
}
this.websocket.onerror = ()=>{
console.log("建立连接错误")
}
this.websocket.onmessage = (event)=>{
console.log("收到消息",event.data)
this.Msg({id:2,type: 'success',content:event.data});
}
this.websocket.onclose = (event)=>{
console.log("关闭连接",event)
}
}else {
this.Msg({id:1,type: 'warnning',content:"浏览器不支持WebSocket"});
}
}
},
beforeDestroy() {
this.websocket.close();
this.websocket = null;
}
2.后端
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
/**
* @Auther: MaJiT
* @Date: 2020/9/23
*/
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
@ServerEndpoint("/webSocket")
@Component
@Slf4j
public class WebSocket {
private Session session;
//存储连接
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<>();
/**
* 建立连接
* @param session
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this);
log.info("有新的连接");
}
/**
* 断开连接
*/
@OnClose
public void onClose(){
webSocketSet.remove(this);
log.info("连接断开");
}
/**
* 接收消息
* @param message
*/
@OnMessage
public void onMessage(String message){
log.info("收到消息:"+message);
}
/**
* 发送广播消息
* @param message
*/
public void sendMessage(String message){
for (WebSocket socket :webSocketSet){
try {
socket.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
@Autowired
WebSocket webSocket;
webSocket.sendMessage("服务器主动发送消息给客户端");