SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

目錄:https://github.com/dolyw/NettyStudy

項目地址

Github：https://github.com/dolyw/ProjectStudy/tree/master/Netty/00-Netty-SocketIO
Gitee(碼雲)：https://gitee.com/dolyw/ProjectStudy/tree/master/Netty/00-Netty-SocketIO

軟件架構

SpringBoot + Netty-SocketIO + Vue + ElementUI

項目介紹

SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

Netty-SocketIO是一個開源的、基於Netty的、Java版的即時消息推送項目。通過Netty-SocketIO，我們可以輕鬆的實現服務端主動向客戶端推送消息的場景，比如說股票價格變化、K線圖、消息提醒等。它和WebSocket有相同的作用，只不過Netty-SocketIO可支持所有的瀏覽器

注: 不能是同一個Cookie域下(同一個瀏覽器開多個窗口會存在問題)，得開不同的瀏覽器窗口才能進行正常消息推送，也不能是同一個用戶名，不然只有最新窗口有效，當前項目還可以優化

~~前端新窗口應該判斷當前用戶(Cookie)是否存在~~(已完成)
用戶名是否重複校驗
消息可以直接放後臺應用裏持久化

預覽圖示

基礎架子搭建

創建一個SpringBoot 2.1.3的Maven項目，這塊不再詳細描述，添加如下Netty-SocketIO依賴

<netty-socketio.version>1.7.17</netty-socketio.version>
<dependency>
    <groupId>com.corundumstudio.socketio</groupId>
    <artifactId>netty-socketio</artifactId>
    <version>${netty-socketio.version}</version>
</dependency>

配置文件

server:
    port: 8080

spring:
    thymeleaf:
        # 開發時關閉緩存不然沒法看到實時頁面
        cache: false
        # 啓用不嚴格檢查
        mode: LEGACYHTML5

# SocketIO配置
socketio:
    # SocketIO端口
    port: 9090
    # 連接數大小
    workCount: 100
    # 允許客戶請求
    allowCustomRequests: true
    # 協議升級超時時間(毫秒)，默認10秒，HTTP握手升級爲ws協議超時時間
    upgradeTimeout: 10000
    # Ping消息超時時間(毫秒)，默認60秒，這個時間間隔內沒有接收到心跳消息就會發送超時事件
    pingTimeout: 60000
    # Ping消息間隔(毫秒)，默認25秒。客戶端向服務器發送一條心跳消息間隔
    pingInterval: 25000
    # 設置HTTP交互最大內容長度
    maxHttpContentLength: 1048576
    # 設置最大每幀處理數據的長度，防止他人利用大數據來攻擊服務器
    maxFramePayloadLength: 1048576

@Configuration
public class SocketConfig {

    /**
     * logger
     */
    private static final Logger logger = LoggerFactory.getLogger(SocketConfig.class);

    @Value("${socketio.port}")
    private Integer port;

    @Value("${socketio.workCount}")
    private int workCount;

    @Value("${socketio.allowCustomRequests}")
    private boolean allowCustomRequests;

    @Value("${socketio.upgradeTimeout}")
    private int upgradeTimeout;

    @Value("${socketio.pingTimeout}")
    private int pingTimeout;

    @Value("${socketio.pingInterval}")
    private int pingInterval;

    @Value("${socketio.maxFramePayloadLength}")
    private int maxFramePayloadLength;

    @Value("${socketio.maxHttpContentLength}")
    private int maxHttpContentLength;

    /**
     * SocketIOServer配置
     *
     * @param
     * @return com.corundumstudio.socketio.SocketIOServer
     * @author wliduo[[email protected]]
     * @date 2019/4/17 11:41
     */
    @Bean("socketIOServer")
    public SocketIOServer socketIOServer() {
        com.corundumstudio.socketio.Configuration config = new com.corundumstudio.socketio.Configuration();
        // 配置端口
        config.setPort(port);
        // 開啓Socket端口複用
        com.corundumstudio.socketio.SocketConfig socketConfig = new com.corundumstudio.socketio.SocketConfig();
        socketConfig.setReuseAddress(true);
        config.setSocketConfig(socketConfig);
        // 連接數大小
        config.setWorkerThreads(workCount);
        // 允許客戶請求
        config.setAllowCustomRequests(allowCustomRequests);
        // 協議升級超時時間(毫秒)，默認10秒，HTTP握手升級爲ws協議超時時間
        config.setUpgradeTimeout(upgradeTimeout);
        // Ping消息超時時間(毫秒)，默認60秒，這個時間間隔內沒有接收到心跳消息就會發送超時事件
        config.setPingTimeout(pingTimeout);
        // Ping消息間隔(毫秒)，默認25秒。客戶端向服務器發送一條心跳消息間隔
        config.setPingInterval(pingInterval);
        // 設置HTTP交互最大內容長度
        config.setMaxHttpContentLength(maxHttpContentLength);
        // 設置最大每幀處理數據的長度，防止他人利用大數據來攻擊服務器
        config.setMaxFramePayloadLength(maxFramePayloadLength);
        return new SocketIOServer(config);
    }

    /**
     * 開啓SocketIOServer註解支持
     *
     * @param socketServer
     * @return com.corundumstudio.socketio.annotation.SpringAnnotationScanner
     * @author wliduo[[email protected]]
     * @date 2019/7/31 18:21
     */
    @Bean
    public SpringAnnotationScanner springAnnotationScanner(SocketIOServer socketServer) {
        return new SpringAnnotationScanner(socketServer);
    }
}

啓動類

/**
 * SpringBoot啓動之後執行
 *
 * @author wliduo[[email protected]]
 * @date 2019/4/17 11:45
 */
@Component
@Order(1)
public class SocketServer implements CommandLineRunner {

    /**
     * logger
     */
    private static final Logger logger = LoggerFactory.getLogger(ServerRunner.class);

    /**
     * socketIOServer
     */
    private final SocketIOServer socketIOServer;

    @Autowired
    public SocketServer(SocketIOServer socketIOServer) {
        this.socketIOServer = socketIOServer;
    }

    @Override
    public void run(String... args) {
        logger.info("---------- NettySocket通知服務開始啓動 ----------");
        socketIOServer.start();
        logger.info("---------- NettySocket通知服務啓動成功 ----------");
    }

}

這樣就配置完成了，`Netty-SocketIO`封裝的挺簡單的

開始連接

先去下載socket.io.js:https://www.bootcdn.cn/socket.io，放進項目裏，我是直接用的2.2.0，頁面就直接用SpringBoot默認的Thymeleaf

Socket消息對象

/**
 * MessageDto
 *
 * @author wliduo[[email protected]]
 * @date 2019/7/31 18:57
 */
public class MessageDto implements Serializable {

    /**
     * 源客戶端用戶名
     */
    private String sourceUserName;

    /**
     * 目標客戶端用戶名
     */
    private String targetUserName;

    /**
     * 消息類型
     */
    private String msgType;

    /**
     * 消息內容
     */
    private String msgContent;

    /**
     * 空構造方法
     */
    public MessageDto() {
    }

    /**
     * 構造方法
     *
     * @param sourceUserName
     * @param targetUserName
     * @param msgType
     * @param msgContent
     */
    public MessageDto(String sourceUserName, String targetUserName, String msgType, String msgContent) {
        this.sourceUserName = sourceUserName;
        this.targetUserName = targetUserName;
        this.msgType = msgType;
        this.msgContent = msgContent;
    }

    public String getSourceUserName() {
        return sourceUserName;
    }

    public void setSourceUserName(String sourceUserName) {
        this.sourceUserName = sourceUserName;
    }

    public String getTargetUserName() {
        return targetUserName;
    }

    public void setTargetUserName(String targetUserName) {
        this.targetUserName = targetUserName;
    }

    public String getMsgType() {
        return msgType;
    }

    public void setMsgType(String msgType) {
        this.msgType = msgType;
    }

    public String getMsgContent() {
        return msgContent;
    }

    public void setMsgContent(String msgContent) {
        this.msgContent = msgContent;
    }
}

SocketHandler事件類

/**
 * SocketHandler
 *
 * @author wliduo[[email protected]]
 * @date 2019/4/17 13:42
 */
@Component
public class SocketHandler {

    /**
     * logger
     */
    private Logger logger = LoggerFactory.getLogger(SocketHandler.class);

    /**
     * ConcurrentHashMap保存當前SocketServer用戶ID對應關係
     */
    private Map<String, UUID> clientMap = new ConcurrentHashMap<>(16);

    public Map<String, UUID> getClientMap() {
        return clientMap;
    }

    public void setClientMap(Map<String, UUID> clientMap) {
        this.clientMap = clientMap;
    }

    /**
     * socketIOServer
     */
    private final SocketIOServer socketIOServer;

    @Autowired
    public SocketHandler(SocketIOServer socketIOServer) {
        this.socketIOServer = socketIOServer;
    }

    /**
     * 當客戶端發起連接時調用
     *
     * @param socketIOClient
     * @return void
     * @author wliduo[[email protected]]
     * @date 2019/4/17 13:55
     */
    @OnConnect
    public void onConnect(SocketIOClient socketIOClient) {
        String userName = socketIOClient.getHandshakeData().getSingleUrlParam("userName");
        if (StringUtils.isNotBlank(userName)) {
            logger.info("用戶{}開啓長連接通知, NettySocketSessionId: {}, NettySocketRemoteAddress: {}",
                    userName, socketIOClient.getSessionId().toString(), socketIOClient.getRemoteAddress().toString());
            // 保存
            clientMap.put(userName, socketIOClient.getSessionId());
            // 發送上線通知
            this.sendMsg(null, null,
                    new MessageDto(userName, null, MsgTypeEnum.ONLINE.getValue(), null));
        }
    }

    /**
     * 客戶端斷開連接時調用，刷新客戶端信息
     *
     * @param socketIOClient
     * @return void
     * @author wliduo[[email protected]]
     * @date 2019/4/17 13:56
     */
    @OnDisconnect
    public void onDisConnect(SocketIOClient socketIOClient) {
        String userName = socketIOClient.getHandshakeData().getSingleUrlParam("userName");
        if (StringUtils.isNotBlank(userName)) {
            logger.info("用戶{}斷開長連接通知, NettySocketSessionId: {}, NettySocketRemoteAddress: {}",
                    userName, socketIOClient.getSessionId().toString(), socketIOClient.getRemoteAddress().toString());
            // 移除
            clientMap.remove(userName);
            // 發送下線通知
            this.sendMsg(null, null,
                    new MessageDto(userName, null, MsgTypeEnum.OFFLINE.getValue(), null));
        }
    }

    /**
     * sendMsg發送消息事件
     *
     * @param socketIOClient
	 * @param ackRequest
	 * @param messageDto
     * @return void
     * @author wliduo[[email protected]]
     * @date 2019/8/1 11:41
     */
    @OnEvent("sendMsg")
    public void sendMsg(SocketIOClient socketIOClient, AckRequest ackRequest, MessageDto messageDto) {
        if (messageDto != null) {
            // 全部發送
            clientMap.forEach((key, value) -> {
                if (value != null) {
                    socketIOServer.getClient(value).sendEvent("receiveMsg", messageDto);
                }
            });
        }
    }

}

Socket實現網頁common.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment="headJq(title)">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}">加載中</title>
    <link rel="shortcut icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
    <!-- 引入jquery，Moment，socket.io -->
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/moment.min.js}"></script>
    <script th:src="@{js/socket.io.js}"></script>
</head>

</html>

Socket實現網頁index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="/common/common :: headJq('聊天室')"></head>

<body>

    <div id="app">
        <input id="msgContent" name="msgContent" placeholder="請輸入消息">
        <select id="msgType" name="msgType">
            <option value="00">全部</option>
        </select>
        <input type="button" onclick="sendMsg()" value="發送"/>
        <input type="button" onclick="cleanMsg()" value="清空"/>
        <ul id="msgList"></ul>
    </div>
    
    <script type="text/javascript" th:inline="javascript">
        var userName, socket;
        // Socket連接
        function initIm() {
            userName = prompt("請輸入用戶名進入聊天室");
            if ($.trim(userName)) {
                socket = io.connect("localhost:9090", {
                    'query': 'userName=' + userName
                });

                // 成功連接事件
                socket.on('connect', function () {});
                // 斷開連接事件
                socket.on('disconnect', function () {});

                // 監聽receiveMsg接收消息事件
                socket.on('receiveMsg', function (data) {
                    console.log(data);
                    var msgLi = "<li>" + moment().format('HH:mm:ss') + "&nbsp;&nbsp;&nbsp;";
                    if (data.msgType == '00') {
                        // 發送消息給全部人
                        msgLi = msgLi + data.sourceUserName + ": " + data.msgContent;
                    } else if (data.msgType == '01') {
                        // 上線通知
                        msgLi = msgLi +  "<span style='color: blue'>" + data.sourceUserName + "進入了聊天室</span>";
                    } else if (data.msgType == '02') {
                        // 下線通知
                        msgLi = msgLi +  "<span style='color: gray'>" + data.sourceUserName + "離開了聊天室</span>";
                    }
                    msgLi = msgLi +  "</li>";
                    $('#msgList').append(msgLi);
                });
            } else {
                alert("非法用戶名");
            }
        }

        initIm();

        // 發送消息
        function sendMsg() {
            if ($.trim(userName)) {
                var msgContent = $.trim($("#msgContent").val());
                // 消息不能爲空
                if (msgContent) {
                    socket.emit('sendMsg', {
                        "sourceUserName": userName,
                        "msgType": $("#msgType").val(),
                        "msgContent": msgContent
                    });
                } else {
                    alert("消息不能爲空");
                }
                $("#msgContent").val('');
            } else {
                initIm();
            }
        }

        // 清空消息
        function cleanMsg() {
            var result = confirm("你確定清空消息嗎");
            if (result) {
                $('#msgList').html('');
            }
        }
	</script>

</body>

</html>

最後還有一個啓動配置類

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    /**
     * 設置首頁
     *
     * @param registry
     * @return void
     * @author wliduo[[email protected]]
     * @date 2019/1/24 19:18
     */
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/").setViewName("forward:/view.shtml");
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
    }

}

就這樣一個簡單的聊天室就實現了，實際請查看代碼，最後用`Vue` + `ElementUI`美化了一下前端界面

安裝教程

運行項目src\main\java\com\example\Application.java即可，訪問http://localhost:8080，開不同的瀏覽器窗口即可進行聊天

SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

項目地址

軟件架構

項目介紹

SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

注: 不能是同一個Cookie域下(同一個瀏覽器開多個窗口會存在問題)，得開不同的瀏覽器窗口才能進行正常消息推送，也不能是同一個用戶名，不然只有最新窗口有效，當前項目還可以優化

預覽圖示

基礎架子搭建

這樣就配置完成了，`Netty-SocketIO`封裝的挺簡單的

開始連接

就這樣一個簡單的聊天室就實現了，實際請查看代碼，最後用`Vue` + `ElementUI`美化了一下前端界面

安裝教程

SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

SpringBoot + Dubbo的全註解方式入門使用

Java Web可視化界面在線生成代碼系統，自定義代碼模板，快速生成基礎代碼

SpringBoot開啓UDP服務發送及消費UDP協議信息

別在最能喫苦的年紀選擇了安逸

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

項目地址

軟件架構

項目介紹

SpringBoot + Netty-SocketIO快速簡單實現一個即時通訊聊天室(服務器給頁面推送消息通知)

注: 不能是同一個Cookie域下(同一個瀏覽器開多個窗口會存在問題)，得開不同的瀏覽器窗口才能進行正常消息推送，也不能是同一個用戶名，不然只有最新窗口有效，當前項目還可以優化

預覽圖示

基礎架子搭建

這樣就配置完成了，Netty-SocketIO封裝的挺簡單的

開始連接

就這樣一個簡單的聊天室就實現了，實際請查看代碼，最後用Vue + ElementUI美化了一下前端界面

安裝教程

這樣就配置完成了，`Netty-SocketIO`封裝的挺簡單的

就這樣一個簡單的聊天室就實現了，實際請查看代碼，最後用`Vue` + `ElementUI`美化了一下前端界面