*/
@Resource
private IndexService indexService;
private static IndexService indexServiceMapper;

@PostConstruct
public void init() {
    WebSocket.indexServiceMapper = this.indexService;
}

/**
 * 连接建立成功调用的方法
 *
 * @param session 会话
 */
@OnOpen
public void onOpen(Session session) throws Exception {
    this.session = session;
    webSocketSet.add(this);
    //查询当前在线人数
    int nowOnline = indexServiceMapper.nowOnline();
    this.sendMessage(JSON.toJSONString(nowOnline));
}

/**
 * 收到客户端消息后调用的方法
 *
 * @param message 客户端发送过来的消息
 */
@OnMessage
public void onMessage(String message, Session session) throws IOException {
    logger.info("参数信息：{}", message);
    //群发消息
    for (WebSocket item : webSocketSet) {
        try {
            item.sendMessage(JSON.toJSONString(message));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

/**
 * 连接关闭调用的方法
 */
@OnClose
public void onClose() {
    webSocketSet.remove(this);
    if (session != null) {
        try {
            session.close();
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

/**
 * 发生错误时调用
 *
 * @param session 会话
 * @param error   错误信息
 */
@OnError
public void onError(Session session, Throwable error) {
    logger.error("连接异常！");
    error.printStackTrace();
}

/**
 * 发送信息
 *
 * @param message 消息
 */
public void sendMessage(String message) throws IOException {
    this.session.getBasicRemote().sendText(message);
}

/**
 * 自定义消息推送、可群发、单发
 *
 * @param message 消息
 */
public static void sendInfo(String message) throws IOException {
    logger.info("信息:{}", message);
    for (WebSocket item : webSocketSet) {
        item.sendMessage(message);
    }
}

}

4.定时任务（为了给前端实时推送数据，我这里写了个定时任务，定时任务我用的是**cron表达式**,不懂的同学可以上这个网址学习：[cron表达式](https://bbs.csdn.net/topics/618166371)）

@Slf4j
@Component
public class IndexScheduled {

@Autowired
private IndexMapper indexMapper;

/**
 * 每3秒执行一次
 */
//@Scheduled(cron = "0/3 * * * * ? ") //我这里暂时不需要运行这条定时任务，所以将注解注释了，朋友们运行时记得放开注释啊
public void nowOnline() {
    System.err.println("*********   首页定时任务执行   **************");

    CopyOnWriteArraySet<WebSocket> webSocketSet = WebSocket.getWebSocketSet();
    int nowOnline = indexMapper.nowOnline();
    webSocketSet.forEach(c -> {
        try {
            c.sendMessage(JSON.toJSONString(nowOnline));
        } catch (IOException e) {
            e.printStackTrace();
        }
    });

    System.err.println("/n 首页定时任务完成.......");
}

}

* #### 前端：


前端的代码非常的简单，直接上代码。

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】