<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
</dependencies>
webSocket核心是@ServerEndpoint
这个注解。这个注解是Javaee标准里的注解,tomcat7以上已经对其进行了实现,如果是用传统方法使用tomcat发布的项目,只要在pom文件中引入javaee标准即可使用。
但使用springboot内置tomcat时,就不需要引入javaee-api了,spring-boot已经包含了。
springboot的高级组件会自动引用基础的组件,像spring-boot-starter-websocket就引入了spring-boot-starter-web和spring-boot-starter,所以不要重复引入
springboot已经做了深度的集成和优化,注意是否添加了不需要的依赖、配置或声明。由于很多讲解组件使用的文章是和spring集成的,会有一些配置。在使用springboot时,由于springboot已经有了自己的配置,再这些配置有可能导致各种各样的异常。
<dependency>
<groupId>javax</groupId>
<artifactId>javaee-api</artifactId>
<version>7.0</version>
<scope>provided</scope>
</dependency>
复制代码
使用@ServerEndpoint创建websocket端点
首先要注入ServerEndpointExporter类,这个bean会自动注册使用了@ServerEndpoint
注解声明的Websocket endpoint。要注意,如果使用独立的servlet容器,而不是直接使用springboot的内置容器,就不要注入ServerEndpointExporter,因为 它(ServerEndpointExporter) 将由容器自己提供和管理。
WebSocketConfig.java
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();
复制代码
接下来就是写websocket的具体实现类,很简单,直接上代码:
BulletinWebSocket.java
package com.example.websocket.controller;
import com.example.websocket.service.BulletinService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.context.ApplicationContext;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.Date;
import java.util.concurrent.CopyOnWriteArraySet;
* @ServerEndpoint 该注解用来指定一个URI,客户端可以通过这个URI来连接到WebSocket。
* 类似Servlet的注解mapping。无需在web.xml中配置。
* configurator = SpringConfigurator.class是为了使该类可以通过Spring注入。
* @Author jiangpeng
@ServerEndpoint(value = "/webSocket/bulletin")
@Component
public class BulletinWebSocket {
private static final Logger LOGGER = LoggerFactory.getLogger(BulletinWebSocket.class);
private static ApplicationContext applicationContext;
public static void setApplicationContext(ApplicationContext context) {
applicationContext = context;
public BulletinWebSocket() {
LOGGER.info("BulletinWebSocket init ");
// concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
private static CopyOnWriteArraySet<BulletinWebSocket> BULLETIN_WEBSOCKETS = new CopyOnWriteArraySet<BulletinWebSocket>();
// 与某个客户端的连接会话,需要通过它来给客户端发送数据
private Session session;
* 连接建立成功调用的方法
@OnOpen
public void onOpen(Session session) throws IOException {
this.session = session;
// 加入set中
BULLETIN_WEBSOCKETS.add(this);
// 新登录用户广播通知
this.session.getBasicRemote().sendText(applicationContext.getBean(BulletinService.class).getBulletin()+"-"+new Date());
LOGGER.info("有新连接加入{}!当前在线人数为{}", session, getOnlineCount());
@OnClose
public void onClose() {
BULLETIN_WEBSOCKETS.remove(this);
LOGGER.info("有一连接关闭!当前在线人数为{}", getOnlineCount());
* 收到客户端消息后调用的方法
* @param message 客户端发送过来的消息
* @param session 可选的参数
@OnMessage
public void onMessage(String message, Session session) {
LOGGER.info("来自客户端的信息:{}", message);
@OnError
public void onError(Session session, Throwable error) {
LOGGER.error("发生错误:{}", session.toString());
error.printStackTrace();
* 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
* 因为使用了Scheduled定时任务,所以方法不是有参数
* @throws Exception
@Scheduled(cron = "0/2 * * * * ?")
public void sendMessage() throws IOException {
// 所有在线用户广播通知
BULLETIN_WEBSOCKETS.forEach(socket -> {
try {
socket.session.getBasicRemote().sendText("定时:"+applicationContext.getBean(BulletinService.class).getBulletin()+"-"+new Date());
} catch (IOException e) {
e.printStackTrace();
public static synchronized int getOnlineCount() {
return BULLETIN_WEBSOCKETS.size();
复制代码
使用springboot的唯一区别是要添加@Component
注解,而使用独立容器不用,是因为容器自己管理websocket的,但在springboot中连容器都是spring管理的。
虽然@Component
默认是单例模式的,但springboot还是会为每个websocket连接初始化一个bean,所以可以用一个静态set保存起来private static CopyOnWriteArraySet<BulletinWebSocket> BULLETIN_WEBSOCKETS = new CopyOnWriteArraySet<BulletinWebSocket>();
。
html代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>Title</title>
</head>
<h1>static</h1>
<div id="msg" class="panel-body">
<input id="text" type="text"/>
<button onclick="send()">发送</button>
</body>
<script src="https://cdn.bootcss.com/web-socket-js/1.0.0/web_socket.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://127.0.0.1:8080/webSocket/bulletin");
else {
alert("对不起!你的浏览器不支持webSocket")
//连接发生错误的回调方法
websocket.onerror = function () {
setMessageInnerHTML("error");
//连接成功建立的回调方法
websocket.onopen = function (event) {
setMessageInnerHTML("加入连接");
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
//连接关闭的回调方法
websocket.onclose = function () {
setMessageInnerHTML("断开连接");
//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,
// 防止连接还没断开就关闭窗口,server端会抛异常。
window.onbeforeunload = function () {
var is = confirm("确定关闭窗口?");
if (is) {
websocket.close();
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
$("#msg").append(innerHTML + "<br/>")
//关闭连接
function closeWebSocket() {
websocket.close();
![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/2/21/1690f655083376d7~tplv-t2oaga2asx-image.image)
//发送消息
function send() {
var message = $("#text").val();
websocket.send(message);
$("#text").val("");
</script>
</html>
复制代码
GITHUB源码地址《===
通告表设计
通告表Bulletin
CREATE TABLE `bulletin` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '编号id',
`title` varchar(50) COLLATE utf8_bin NOT NULL COMMENT '标题',
`content` varchar(1000) COLLATE utf8_bin NOT NULL COMMENT '内容',
`user_type` tinyint(1) NOT NULL COMMENT '通告对象类型 1:单个用户 2:多个用户 3:全部用户',
`user_roles` varchar(20) COLLATE utf8_bin DEFAULT NULL COMMENT '通告对象角色',
`user_depts` varchar(20) COLLATE utf8_bin DEFAULT NULL COMMENT '通告对象部门',
`type` tinyint(1) DEFAULT NULL COMMENT '通告类型 1:系统升级',
`publish_time` datetime DEFAULT NULL COMMENT '发布时间',
`status` tinyint(1) NOT NULL DEFAULT '0' COMMENT '状态 0:待发布 1:已发布 2:撤销 ',
`created_at` datetime NOT NULL COMMENT '创建时间',
`updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
`created_by` int(11) NOT NULL COMMENT '创建人',
`updated_by` int(11) NOT NULL COMMENT '修改人',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='通告表';
复制代码
用户标记表BulletinUser
CREATE TABLE `bulletin_user` (
`bulletin_id` int(11) NOT NULL COMMENT '通告编号id',
`user_id` int(11) NOT NULL COMMENT '用户id',
`is_read` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否阅读 0否 1是',
`created_at` datetime NOT NULL COMMENT '创建时间',
`updated_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '修改时间',
PRIMARY KEY (`bulletin_id`,`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_bin COMMENT='用户通告标记表';
复制代码
业务规则
单个用户:通告表添加一条记录,用户标记表添加一条记录
多个用户:通告表添加一条记录,用户标记表添加多条记录
全部用户:通告表添加一条记录
单个用户:修改用户标记表中的记录
多个用户:修改用户标记表中的记录
全部用户:用户标记表添加阅读记录
发现新通告的规则
单个用户:通告表中有,并且通告对象类型是“单个用户”,并且用户标记表中的未读标记是“0”
多个用户:通告表中有,并且通告对象类型是“多个用户”,并且用户标记表中的未读标记是“0”
全部用户:通告表中有,并且通告对象类型是“全部用户”,并且用户标记表中没有用户的信息
通告弹窗提示
在线用户可以收到并弹窗显示,看过的就不用再显示了
(websocket 服务查询当前用户是否有未读的公告,也就是所有全部用户类型通告编号 not in 已读通告编号,多出来的结果就是需要弹窗的通告, 可以时间筛选,免得新员工弹所有公告 )
没看过的一登录也会弹窗显示或者实时
前端任何页面都可以接受到最新通告并弹窗(公共parent.js做websocket监听)
以上的功能实现居然可以参考上面 BulletinWebSocket.java 中的这几块代码
* 连接建立成功调用的方法
@OnOpen
public void onOpen(Session session) throws IOException {
this.session = session;
// 加入set中
BULLETIN_WEBSOCKETS.add(this);
// 新登录用户广播通知
this.session.getBasicRemote().sendText(applicationContext.getBean(BulletinService.class).getBulletin()+"-"+new Date());
LOGGER.info("有新连接加入{}!当前在线人数为{}", session, getOnlineCount());
复制代码