首先在页面中输入如下代码：
一：前端代码
<html>
<head>
</head>
<body>
这是一个页面
</body>
</html>
<script>
var websocket = null;
if ("WebSocket" in window){
websocket = new WebSocket('ws://测试路径比如localhost:8080/sell/test/tests1');
}else {
alert("该浏览器不支持websocket!");
}
websocket.onopen = function (event) {
console.log('建立连接');
}
websocket.onclose = function (event) {
console.log('连接关闭');
}
websocket.onmessage = function (event) {
console.log('收到消息:' + event.data);
当发送页面传入数据到此方法里。
}
websocket.onerror = function () {
alert('websocket通信发生错误!');
}
window.onbeforeunload = function(){
websocket.close();
}
</script>1.1后台引入界面代码：
@Controller
@RequestMapping("/test/")
public class TestController {
@GetMapping("/tests")
@ResponseBody
public ModelAndView tests(){
return new ModelAndView("order/test_websocket");
}
}
二：在项目maven引入依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>2.1 新建一个配置类
@Component
public class WebSocketConfig {
public ServerEndpointExporter serverEndpointExporter(){
return new ServerEndpointExporter();
}
}
2.2进入此界面结果
三.使用
@Component
@ServerEndpoint("/webSocket")
@Slf4j
public class WebSocket {
private Session session;
private static CopyOnWriteArraySet<WebSocket> webSockets = new CopyOnWriteArraySet<>();
@OnOpen
public void onOpen(Session session){
this.session = session;
webSockets.add(this);
log.info("【websocket消息】有新的连接，总数：{}",webSockets.size());
}
@OnClose
public void onClose(){
webSockets.remove(this);
log.info("【websocket消息】连接断开，总数：{}",webSockets.size());
}
@OnMessage
public void onMessage(String message){
log.info("【websocket消息】收到客户端发来的消息{}",message);
}
public void sendMessage(String message){
for (WebSocket webSocket : webSockets){
log.info("【websocket消息】广播消息 message{}",message);
try {
webSocket.session.getBasicRemote().sendText(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
3.1 当登录你刚刚生成的 script 代码的页面时候，出现如下；正是对应前端script中的建立连接。
3.2 生成一个测试推送消息类如下
@Controller
@RequestMapping("/test/")
public class TestController {
@Autowired
private WebSocket webSocket;
@GetMapping("/tests")
@ResponseBody
public String tests(){
webSocket.sendMessage("这是测试消息推送功能");
return "这是使用此推送测试界面";
}
@GetMapping("/tests1")
@ResponseBody
public ModelAndView tests1(){
return new ModelAndView("order/test_websocket");
}
}
3.3登录此页面之后
登录界面：
结果界面：
这是接收页面的提醒
当信息可以传送到前端页面的时候，等同于 你想实现什么方式提醒都可以，比如，弹窗。。
