springboot整合webSocket和定时器，实现消息主动定时提醒，页面右下角弹窗提示
目录
一、webSocket的基本配置
①、maven依赖部分
②、websocket相关的Java代码部分
二、springboot内置定时器调用websocket向客户端发送请求
三、下面开始前端页面部分的代码了
①、js部分代码
②、html代码部分，即弹窗页面
前段时间客户要求做个加班登记的功能，到固定的时间节点网站右下角会有带声音的弹窗提醒。。。。what??带声音？？以前从来没做过声音，马上说弹窗可以，声音的话不一定，没做过，要研究一下。回去后研究了下，我尼玛，一个audio标签就能搞定。然后研究消息主动提醒，一直想着前台刷新刷新发请求，网上一搜，发现了websocket这个好东西，研究了下，果然好用，下面进入正题。
一、webSocket的基本配置
①、maven依赖部分
org.springframework.boot
spring-boot-starter-websocket
②、websocket相关的Java代码部分
配置一个WebSocketConfig
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;
@Configuration
public class WebSocketConfig {
@Bean
public ServerEndpointExporter serverEndpointExporter() {
return new ServerEndpointExporter();
}
}配置一个连接类(因为我的需求是消息推送，所有只用到了sendInfo()这个方法，其他的还没研究！！)
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;
@RestController
@ServerEndpoint("/websocket")
public class WebSocketServer {
static Logger log=LoggerFactory.getLogger(WebSocketServer.class);
//静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
private static int onlineCount = 0;
//concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();
//与某个客户端的连接会话，需要通过它来给客户端发送数据
private Session session;
//接收sid
private String sid="";
/**
* 连接建立成功调用的方法*/
@OnOpen
public void onOpen(Session session,@PathParam("sid") String sid) {
//获取地址
// String path = this.getClass().getProtectionDomain().getCodeSource().getLocation().getFile();
//Properties prop = new Properties();
// try {
// //装载配置文件
// //prop.load(new FileInputStream(new File("src/main/resources/application.properties")));
// //prop.load(new FileInputStream(new File(path+"/"+"application.properties")));
// } catch (IOException e) {
// e.printStackTrace();
// }
//返回获取的值
// String req_addr = prop.getProperty("req_addr");
RestTemplate restTemplate = new RestTemplate();
this.session = session;
webSocketSet.add(this); //加入set中
addOnlineCount(); //在线数加1
log.info("有新窗口开始监听:"+sid+",当前在线人数为" + getOnlineCount());
this.sid=sid;
try {
String reslut = restTemplate.postForObject("http://127.0.0.1/f/getmessage",sid,String.class);
sendMessage(reslut);
} catch (IOException e) {
log.error("websocket IO异常");
}
}
/**
* 连接关闭调用的方法
*/
@OnClose
public void onClose() {
webSocketSet.remove(this); //从set中删除
subOnlineCount(); //在线数减1
log.info("有一连接关闭！当前在线人数为" + getOnlineCount());
}
/**
* 收到客户端消息后调用的方法
*
* @param message 客户端发送过来的消息*/
@OnMessage
public void onMessage(String message, Session session) {
log.info("收到来自窗口"+sid+"的信息:"+message);
//群发消息
for (WebSocketServer item : webSocketSet) {
try {
item.sendMessage(message);
} catch (IOException e) {
e.printStackTrace();
}
}
}
/**
*
* @param session
* @param error
*/
@OnError
public void onError(Session session, Throwable error) {
log.error("发生错误");
error.printStackTrace();
}
/**
* 实现服务器主动推送
*/
public void sendMessage(String message) throws IOException {
this.session.getBasicRemote().sendText(message);
}
/**
* 群发自定义消息
* */
public static void sendInfo(String message,@PathParam("sid") String sid) throws IOException {
log.info("推送消息到窗口"+sid+"，推送内容:"+message);
for (WebSocketServer item : webSocketSet) {
try {
//这里可以设定只推送给这个sid的，为null则全部推送
if(sid==null) {
item.sendMessage(message);
}else if(item.sid.equals(sid)){
item.sendMessage(message);
}
} catch (IOException e) {
continue;
}
}
}
public static synchronized int getOnlineCount() {
return onlineCount;
}
public static synchronized void addOnlineCount() {
WebSocketServer.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocketServer.onlineCount--;
}
}
二、springboot内置定时器调用websocket向客户端发送请求
定时器里的内容只是我的业务场景哦，你们只需看调用sendInfo()部分就可，因为我是向所有人提醒，所以sid的值为null,第一个字符串就是对应的message推送内容。
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
@Component
public class Scheduler {
@Autowired
private HolidayetableService holidayetableService;
private static final SimpleDateFormat dateFormat = new SimpleDateFormat("HH:mm:ss");
@Scheduled(cron="0 0/30 21/1 * * ? ")//每天21点开始，每30分钟一次(21:00:00--23:30:00)
//@Scheduled(cron="*/25 * * * * ?")
public void testTasks() throws IOException {
String findstate = holidayetableService.findstate(DateUtils.formatDate(new Date(), "yyyy-MM-dd"));
//为节假日
if("1".equals(findstate)) {
System.err.println("定时任务111执行时间（节假日执行）：" + dateFormat.format(new Date()));
WebSocketServer webSocketServer=new WebSocketServer();
webSocketServer.sendInfo("zmjiaban", null);
}else {
System.err.println("定时任务111执行时间(工作日执行)：" + dateFormat.format(new Date()));
WebSocketServer webSocketServer=new WebSocketServer();
webSocketServer.sendInfo("jiaban", null);
}
}
}
三、下面开始前端页面部分的代码了
①、js部分代码
这只是我业务场景的代码，其中webSocket.onmessage = function(event){}这个方法中，event.data的值就是刚刚后台发送过来的message的值，你可以根据这个值做各种自己业务上的事情
var webSocket = new WebSocket("ws://127.0.0.1:80/websocket");
webSocket.onopen = function(event){
console.log("连接成功");
//console.log(event);
};
webSocket.onerror = function(event){
console.log("连接失败");
//console.log(event);
};
webSocket.onclose = function(event){
console.log("Socket连接断开");
//console.log(event);
};
webSocket.onmessage = function(event){
//接受来自服务器的消息
var data = event.data;
var usercode = "${usercode}";
if(data!="1"){
var subdata = data.substring(0, 4);
if("jiab"== subdata){//加班登记(工作日加班)
//判断当前是否登记过加班，登记过则不弹提示框
$.post("${ctx}//addworktable/findAddWork",function(data){
if(data=="1"){
return;
}else{
$("#swdiv2").empty();
var newuri="${ctx}";
var val=" ";
$("#swdiv2").append(val);
//弹出窗口
$(".fdbody2").animate({height:"show"},800);
bf();//提示音播放
}
})
}
else if("zmji"== subdata){//加班登记(节假日加班)
//判断当前是否登记过加班，登记过则不弹提示框
$.post("${ctx}/addworktable/findzmAddWork",function(data){
console.log(data);
if(data.type=="1"){
return;
}else{
$("#swdiv2").empty();
var newuri="${ctx}";
var val=" ";
$("#swdiv2").append(val);
//弹出窗口
$(".fdbody2").animate({height:"show"},800);
bf();//提示音播放
}
})
}
}
//myAuto.stop();
// myAuto.play();
}![](\"/images/jbdj.png"+"\")
\n" +
" ![](\"/static/images/jbdj.png"+"\")
\n" +
" ②、html代码部分，即弹窗页面
加班登记提醒
所有的代码基本上都是这些了，欢迎大佬们提出意见啊！！