https://www.cnblogs.com/bianzy/p/5822426.html
首先 在pom.xml中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
然后去添加bean 配置
@Component
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}
然后写webSocket的后台代码 ，千万注意！！
要是public 的类，不然在加载注入的时候访问不了
package com.nchu.service;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.util.concurrent.CopyOnWriteArraySet;
/**
* Created by user12 on 2018/1/4.
*/
@Component
@ServerEndpoint("/webSocket") //
这里写 ws（websocket协议的访问地址 这里的意思就是 ws:域名/webSocket）
@Slf4j
public class WebSocket {
private Session session;
//用这个set来存储session
/**
* 存储session的容器
*/
private static CopyOnWriteArraySet<WebSocket> webSocketSet=new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session){
this.session=session;
webSocketSet.add(this);
log.info("websocket消息,有新的连接，总数:{}",webSocketSet.size());
}
@OnClose
public void onClose(){
webSocketSet.remove(this);
log.info("连接断开，当前总数:{}",webSocketSet.size());
}
@OnMessage
public void onMessage(String message){
log.info("收到客户端发来的消息:{}",message);
}
public void sendMessage(String messgae){
for (WebSocket webSocket:webSocketSet){
//这里是对所有的socket连接发送消息
log.info("websocket消息,广播消息:{}",messgae);
try {
webSocket.session.getBasicRemote().sendText(messgae);
}catch (Exception e){
log.info("异常:{}",e);
}
}
}
}
最后 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
</head>
<body>
<script>
var websocket = null;
if ("WebSocket" in window) {
websocket = new WebSocket('ws://localhost:8080/webSocket');
<!--这里是ws协议的地址 ，访问后台接口的地址，wss是加密协议，ws是普通-->
} else {
alert('该浏览器不支持websocket');
}
websocket.onopen=function (event) {
console.log('建立连接');
}
websocket.onclose=function (event) {
console.log('连接关闭');
}
websocket.onmessage=function (event) {
console.log('收到消息'+event.data);
//todo
}
websocket.onerror=function (event) {
console.log('通信错误');
}
Window.onbeforeunload=function () {
websocket.close();
}
</script>
</body>
</html>
演示
后台
前端
二，webSoket中 ，针对指定用户进行消息通信
在这里 是向指定sellid的用户发送消息
这个sellId即商家的id，商家在登陆后台时候，会去连接websocket 从而把自己的id传过去 然后存为session
因为这个不是群发，所以存成map,这个map的key就是sellId
发送消息
前端
<script th:inline="javascript">
/* <![CDATA[ */
var url='ws://localhost:8080/webSocket/'+[[${session.User.sellId}]];
var websocket = null;
if ("WebSocket" in window) {
websocket = new WebSocket(url);
} else {
alert('该浏览器不支持websocket');
}
websocket.onopen=function (event) {
console.log('建立连接');
}
websocket.onclose=function (event) {
console.log('连接关闭');
}
websocket.onmessage=function (event) {
console.log('收到消息'+event.data);
alert(event.data);
}
websocket.onerror=function (event) {
console.log('通信错误');
}
Window.onbeforeunload=function () {
websocket.close();
}
/* ]]> */
</script>