springboot 使用websocket技术主动给前端发送消息的实现

目录

• 使用websocket技术主动给前端发送消息
• WebSocketConfig
• WebSocketServer
• websocket基础入门-前端发送消息
• 项目结构如下图

使用websocket技术主动给前端发送消息

springBoot2.0对WebSocket的支持简直太棒了，直接就有包可以引入

        <dependency>
           <groupId>org.springframework.boot</groupId>
           <artifactId>spring-boot-starter-websocket</artifactId>
       </dependency> 

WebSocketConfig

启用WebSocket的支持也是很简单

package com.spark.common.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @Author Lxq
 * @Date 2021-06-12 17:11
 * @Version 1.0
 * 开启websocket支持
 */
@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}
 

WebSocketServer

这就是重点了，核心都在这里。

因为WebSocket是类似客户端服务端的形式(采用ws协议)，那么这里的WebSocketServer其实就相当于一个ws协议的Controller

直接@ServerEndpoint("/socketServer/{userId}") 、@Component启用即可，然后在里面实现@OnOpen开启连接，@onClose关闭连接，@onMessage接收消息等方法。

新建一个ConcurrentHashMap webSocketMap 用于接收当前userId的WebSocket，方便IM之间对userId进行推送消息。单机版实现到这里就可以。

package com.spark.common.utils.websocket;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.spark.common.utils.StringUtils;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;

/**
 * @Author Lxq
 * @Date 2021-06-12 17:13
 * @Version 1.0
 */
@ServerEndpoint("/socketServer/{userId}")
@Component
@Slf4j
public class WebSocketServer {
    /**
     * 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;
    /**
     * concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
     */
    private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
    /**
     * 与某个客户端的连接会话，需要通过它来给客户端发送数据
     */
    private Session session;
    /**
     * 接收userId
     */
    private String userId = "";

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
            webSocketMap.put(userId, this);
            //加入set中
        } else {
            webSocketMap.put(userId, this);
            //加入set中
            addOnlineCount();
            //在线数加1
        }

        log.info("用户连接:" + userId + ",当前在线人数为:" + getOnlineCount());

        try {
            sendMessage("连接成功");
        } catch (IOException e) {
            log.error("用户:" + userId + ",网络异常!");
        }
    } 

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
            //从set中删除
            subOnlineCount();
        }
        log.info("用户退出:" + userId + ",当前在线人数为:" + getOnlineCount());
    } 

    /**
     * 收到客户端消息后调用的方法
     *
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("用户消息:" + userId + ",报文:" + message);
        //可以群发消息
        //消息保存到数据库、redis
        if (StringUtils.isNotBlank(message)) {
            try {
                //解析发送的报文
                JSONObject jsonObject = JSON.parseObject(message);
                //追加发送人(防止串改)
                jsonObject.put("fromUserId", this.userId);
                String toUserId = jsonObject.getString("toUserId");
                //传送给对应toUserId用户的websocket
                if (StringUtils.isNotBlank(toUserId) && webSocketMap.containsKey(toUserId)) {
                    webSocketMap.get(toUserId).sendMessage(jsonObject.toJSONString());
                } else {
                    log.error("请求的userId:" + toUserId + "不在该服务器上");
                    //否则不在这个服务器上，发送到mysql或者redis
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用户错误:" + this.userId + ",原因:" + error.getMessage());
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    } 

    /**
     * 发送自定义消息
     */
    public static void sendInfo(String message, @PathParam("userId") String userId) throws IOException {
        log.info("发送消息到:" + userId + "，报文:" + message);
        if (StringUtils.isNotBlank(userId) && webSocketMap.containsKey(userId)) {
            webSocketMap.get(userId).sendMessage(message);
        } else {
            log.error("用户" + userId + ",不在线！");
        }
    }

    /**
     * 获取当前在线人数
     *
     * @return
     */
    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    /**
     * 添加人数
     */
    public static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

    /**
     * 减少人数
     */
    public static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
}

websocket基础入门-前端发送消息

项目结构如下图

TestSocket.java

package com.charles.socket;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
@ServerEndpoint(value = "/helloSocket")
public class TestSocket {
    /***
     * 当建立链接时，调用的方法.
     * @param session
     */
    @OnOpen
    public void open(Session session) {
        System.out.println("开始建立了链接...");
        System.out.println("当前session的id是：" + session.getId());
    }

    /***
     * 处理消息的方法.
     * @param session
     */
    @OnMessage
    public void message(Session session, String data) {
        System.out.println("开始处理消息...");
        System.out.println("当前session的id是：" + session.getId());
        System.out.println("从前端页面传过来的数据是：" + data);
    }
}

index.jsp 代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Charles-WebSocket</title>
<script type="text/javascript">
    var websocket = null;
    var target = "ws://localhost:8080/websocket/helloSocket";
    function buildConnection() {

        if('WebSocket' in window) {
            websocket = new WebSocket(target);
        } else if('MozWebSocket' in window) {
            websocket = MozWebSocket(target);
        } else {
            window.alert("浏览器不支持WebSocket");
        }
    }

    // 往后台服务器发送消息.
    function sendMessage() {
        var sendmsg = document.getElementById("sendMsg").value;
        console.log("发送的消息：" + sendmsg);
        // 发送至后台服务器中.
        websocket.send(sendmsg);
    }

</script>
</head>
<body>

    <button onclick="buildConnection();">开始建立链接</button>
    <hr>
    <input id="sendMsg" /> <button onclick="sendMessage();">消息发送</button>
</body>
</html>

注意：

和后台交互的时候，一定要先点击：开始建立连接。你懂的...没有建立连接的话，是不能发送消息的。

先点击，开始建立连接，然后在文本框中输入内容：我是Charles，点击消息发送，在看后台日志。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。