2. 程式人生 > >Spring 學習——基於Spring WebSocket 和STOMP實現簡單的聊天功能

Spring 學習——基於Spring WebSocket 和STOMP實現簡單的聊天功能

阿新 • • 發佈：2019-01-07

本篇主要講解如何使用Spring websocket 和STOMP搭建一個簡單的聊天功能專案，裡面使用到的技術，如websocket和STOMP等會簡單介紹，不會太深，如果對相關介紹不是很瞭解的，請自行查閱相關知識。
本篇的專案主要是一個學習Spring websocket和STOMP的專案，基於Spring4.0之上。因為Spring4.0之上才支援Websocket。例子比較的簡單，但是總體實現了

  1. 瀏覽器 和伺服器可以正常建立websocket服務
  2. 瀏覽器可以像伺服器訂閱併發送訊息
  3. 瀏覽器可以接收到伺服器推送過來的訊息，即瀏覽器訂閱的訊息

一.簡單介紹Websocket和STOMP

1.websocket介紹

websocket協議是html5的一種新的協議，提供了通過套接字實現全雙工通訊的功能，【全雙工：意味著伺服器可以傳送訊息給瀏覽器，瀏覽器也可以傳送訊息給伺服器】並能夠實現web瀏覽器和伺服器之間的非同步通訊。

它和http通訊機制對比如下圖：

這裡寫圖片描述

  • http每次傳送請求都需要和伺服器建立一次連線， 是一種無狀態的協議。
  • websocket只要第一個建立成功，瀏覽器就可以伺服器進行通訊，是一種有狀態的協議。
  • websocket協議的請求報文和響應報文和http也是有區別的，這裡不做介紹!

2.STOMP介紹

什麼是 STOMP呢？
http是在TCP套接字之上添加了請求-響應模型!
STOMP是在WebSocket之上提供了一個基於幀的線路格式層，用於定義訊息的語義。
STOMP幀由命令、一個或多個頭資訊以及負載所組成！舉例傳送資料的一個STOMP幀：

SEND
destination：/app/marco
content-length:20

{\"message\":\"hello\"}
  • 這裡STOMP的命令是SEND，後面接傳送的目標地址，訊息內容長度，然後是一個空行，最後是傳送內容，這個裡面是一個JSON訊息。
  • 這裡需要注意的是destination，目標地址，訊息會發送到這個目的地，這個目的地有服務端元件來進行處理。
  • Spring使用STOMP需要進行配置，並且Spring為STOMP訊息提供了基於SpringMVC的程式設計模型！

下面進入實戰演練：

1、新增依賴

<!-- 新增Spring依賴 -->
 

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-core</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context-support</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aop</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-tx</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!--spring單元測試依賴 -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>${spring.version}</version>
      <scope>test</scope>
    </dependency>

    <!-- spring webmvc相關jar -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-web</artifactId>
      <version>${spring.version}</version>
    </dependency>

    <!--Spring websocket start-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-websocket</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-messaging</artifactId>
      <version>${spring.version}</version>
    </dependency>
    <!--Spring websocket end-->

    <!-- For SockJS -->
    <!-- http://jira.codehaus.org/browse/JACKSON-884 -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-core</artifactId>
      <version>${jackson.version}</version>
    </dependency>
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-annotations</artifactId>
      <version>${jackson.version}</version>
    </dependency>

2、新增配置檔案

1.web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
  <display-name>spring-webscoket</display-name>
  <!-- 讀取spring配置檔案 -->


    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>classpath*:application*.xml</param-value>
    </context-param>


    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>

    <!-- Spring字符集過濾器 -->
    <filter>
        <filter-name>SpringEncodingFilter</filter-name>
        <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>forceEncoding</param-name>
            <param-value>true</param-value>
        </init-param>
        <async-supported>true</async-supported>
    </filter>
    <filter-mapping>
        <filter-name>SpringEncodingFilter</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>



    <!-- springMVC核心配置 -->
    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <!--spingMVC的配置路徑 -->
            <param-value>classpath:spring-mvc.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
        <async-supported>true</async-supported>
    </servlet>
    <!-- 攔截設定 -->
    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>


  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

需要注意：< async-supported>true< /async-supported>，在filter和Servlet中都需要新增！

2.spring-mvc.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:p="http://www.springframework.org/schema/p"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc"
  xsi:schemaLocation="
    http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans-3.2.xsd
    http://www.springframework.org/schema/context
    http://www.springframework.org/schema/context/spring-context-3.2.xsd
    http://www.springframework.org/schema/mvc
    http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd">

    <!-- 掃描controller（controller層注入） -->
   <context:component-scan base-package="com.dufy"/>

     <mvc:annotation-driven />

    <!-- 當在web.xml 中   DispatcherServlet使用 <url-pattern>/</url-pattern> 對映時，能對映靜態資源 -->
    <mvc:default-servlet-handler />  
    <!-- 靜態資源對映 -->
    <mvc:resources mapping="/static/**" location="/WEB-INF/static/"/>


   <!-- 對模型檢視新增前後綴 -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/" />
        <property name="suffix" value=".jsp" />
    </bean>


</beans>
3.applicationContext.xml
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:aop="http://www.springframework.org/schema/aop"
xmlns:tx="http://www.springframework.org/schema/tx"
xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-3.0.xsd
http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.0.xsd
">

    <!-- Spring WebSocketSession管理容器 -->
    <bean id="webSocketSessionManager" class="com.dufy.webscocket.session.data.DefaultWebSocketSessionManager" />

    <!-- websocket握手攔截器 -->
    <bean id="handshakeInterceptor" class="com.dufy.webscocket.interceptor.ChatHandInteceptor" />

    <!-- WebSocket相關監聽器 -->
    <bean id="sessionConnectedListener" class="com.dufy.webscocket.listener.SessionConnectedListener" />
    <bean id="sessionDisConnectedListener" class="com.dufy.webscocket.listener.SessionClosedListener" />
    <bean id="sessionSubscribeListener" class="com.dufy.webscocket.listener.SessionSubscribeListener" />

</beans>

3、新增程式碼

1.後臺程式碼目錄

這裡寫圖片描述

2.前臺程式碼

（1）建立websocket的jsp頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getServerName() + ":"
            + request.getServerPort();
    String finalPath = "http://" + basePath + path;
    out.print("finalPath = " + finalPath);
%>
<html>
<head>

    <script src="${pageContext.request.contextPath}/recourse/jquery-1.7.2.min.js"></script>
    <script src="${pageContext.request.contextPath}/recourse/stomp.js"></script>
    <script src="${pageContext.request.contextPath}/recourse/sockjs.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            connect();
            //checkoutUserlist();
        });

        var projectName = "springwebscoket";
        var baseUrl= getBaseUrl();
        var stompClient = null;
        console.log("baseUrl = " + baseUrl);
        //this line.
        function connect() {
            console.log('Connected: ----------------------------------');
            var userid = document.getElementById('name').value;

            var socket = new SockJS(baseUrl + projectName +"/chat");
            console.log("=-="+ socket);
            stompClient = Stomp.over(socket);

            stompClient.connect({}, function(frame) {
                setConnected(true);
                console.log('Connected: ' + frame);

                stompClient.ws.onclose = function (CloseEvent){
                    console.log("ERROR","weboscket close code is " + CloseEvent.code);
                    setConnected(false);
                };

                //系統訂閱訊息
                stompClient.subscribe('/user/queue/system/newMsg', function (greeting) {
                    console.log("------ue/system/newMsg-----------");
                    console.log(greeting);
                    showGreeting(JSON.parse(greeting.body).content);
                });

                //新訊息訂閱
                stompClient.subscribe('/user/queue/chat/newMsg', function (greeting) {
                    console.log("/chat/newMsg" + greeting);
                    $("#showMessage").append("<p>"+JSON.parse(greeting.body).message+"</p>")
                    //showGreeting(JSON.parse(greeting.body).content);
                });

                //訪客訊息響應訂閱
                stompClient.subscribe('/user/queue/chat/msgResponse', function (greeting) {
                    alert("收到資訊");
                });

                //關閉訂閱訊息
                stompClient.subscribe('/user/queue/system/close', function (greeting) {
                    var retCode = JSON.parse(greeting.body).retCode;
                    if(retCode == "000000"){
                        _evaluate.open();
                        disconnect();
                    }
                });


            },function(error){
                var msg = "會話建立失敗，請稍候重試！";
                alert(msg);
                setConnected(false);

            });
        }



        function sendName() {
            var name = document.getElementById('name').value;
            stompClient.send("/app/sendMessage", {}, JSON.stringify({ 'name': name }));
        }

        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            setConnected(false);
            console.log("Disconnected");
        }


        function setConnected(connected) {
            document.getElementById('connect').disabled = connected;
            document.getElementById('disconnect').disabled = !connected;
            document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
            document.getElementById('response').innerHTML = '';
        }

        function showGreeting(message) {
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);
        }


        /**
         * 獲取baseUrl
         * @returns {string}
         */
        function getBaseUrl(){
            var url= window.location.href;
            var num = url.indexOf(projectName);
            var baseUrlStr = url.substring(0,num);
            return baseUrlStr;
        }
    </script>
</head>
<body>
<h1>Welcome</h1> ${name }<h1>訪問此頁面</h1>
<div>
    <div>
        <button id="connect" onclick="connect();">Connect</button>
        <button id="connectAny" onclick="connectAny();">ConnectAny</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>
    </div>
    <div id="conversationDiv">
        <label>you can send message to WebSocketMessageController[ @MessageMapping("/sendMessage") ]</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">Send</button>
        <p id="response"></p>
    </div>

    <div id="showMessage">

    </div>

</div>
</div>
</body>
</html>

（2）伺服器推送訊息的頁面：

<%@ page contentType="text/html; charset=utf-8"%>
<!doctype html>
<html>
<head>
    <title>agent page</title>
    <script src="${pageContext.request.contextPath}/recourse/jquery.js"></script>
</head>
<body>
    <div>
        <input type="text" placeholder="請輸入wsSocketid" id="webSocketId" value="${wsId}"/><br/>
        <input type="text" placeholder="請輸入傳送的內容" id="message"/><br/>
        <button id="sendMsg">傳送</button>
        <button id="resetMessage">清空傳送內容</button>
        <button id="resetid">重置id</button>
    </div>

</body>
<script>

    $("#sendMsg").click(function () {
        var webSocketId = $("#webSocketId").val();
        var message = $("#message").val();
        var url = "${pageContext.request.contextPath}/websocket/notifyMsg";
        $.post(url,{"webSocketId":webSocketId,"message":message},function (data) {
            console.log(data);
            alert(data);

        })
    })
    $("#resetid").click(function () {
        $("#webSocketId").val("");
    })
    $("#resetMessage").click(function () {
        $("#message").val("");
    })

</script>
</html>

4、專案演示

（1）.啟動專案，我專案 不是的Application context 為 /springwebscoket ，埠9091，啟動成功訪問：http://localhost:9081/springwebscoket/，顯示如下頁面：
這裡寫圖片描述

（2）.點選訪客登入，進行登入，登入成功！建立websocket成功！如圖：
這裡寫圖片描述

（3）.建立成功，傳送訊息到伺服器，如圖：
這裡寫圖片描述

（4）.建立成功，接收伺服器發來的訊息，如圖：
這裡寫圖片描述

三.總結

上面的專案裡面的程式碼沒有具體進行講解，因為專案中可以執行起來，並且裡面的邏輯也比較簡單，如有不懂的地方可以直接對專案進行debug除錯，一步步看，一步步學習，建議學習之前，要對websocket和STOMP有了解！
如果您對專案中有不懂的地方，歡迎加入我的QQ群：600756207，和我進行溝通！共同成長！

四.參考

官方文件

歡迎訪問我的csdn部落格，我們一同成長！

“不管做什麼，只要堅持下去就會看到不一樣！在路上，不卑不亢!”

相關推薦

Spring 學習——基於Spring WebSocket 和STOMP實現簡單的聊天功能

本篇主要講解如何使用Spring websocket 和STOMP搭建一個簡單的聊天功能專案，裡面使用到的技術，如websocket和STOMP等會簡單介紹，不會太深，如果對相關介紹不是很瞭解的，請自行查閱相關知識。 本篇的專案主要是一個學習Spring we

第18章-使用WebSocket和STOMP實現消息功能

control rom rup mpm 空間 except 線路 如何 cto Spring 4.0為WebSocket通信提供了支持，包括： 發送和接收消息的低層級API； 發送和接收消息的高級API； 用來發送消息的模板； 支持SockJS，用來解決瀏覽器端、服務器

Java後臺框架篇--spring websocket 和stomp實現訊息功能

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <html> <head> <title>Home</title> <spring:

使用spring websocket 和stomp實現訊息功能

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <html> <head> <title>Home</title> <spring:

spring 使用WebSocket 和 STOMP 實現訊息功能

1）本文旨在 介紹如何 利用 WebSocket 和 STOMP 實現訊息功能； 2）要知道， WebSocket 是傳送和接收訊息的 底層API，而SockJS 是在 WebSocket 之上的 API；最後 STOMP（面向訊息的簡單文字協議）是基於 SockJS 的高

第18章　使用WebSocket和 STOMP實現訊息功能

概述： 瀏覽器和伺服器之間傳送訊息在SpringMVC控制器中處理訊息為目標使用者傳送訊息為了解決應用為web應用之間的通訊 Spring4.0 為 WebSocket通訊提供了支援 包括： 傳送和接收訊息的低層級API；傳送和接收訊息的高階API；用來發送訊息的模板

通過WebSocket和STOMP實現瀏覽器和伺服器的訊息通訊

非同步訊息非同步訊息有兩個重要的概念，訊息代理（broker）和目的地（destination）。訊息代理：當一個應用傳送訊息時，需要制定傳送的目的地，然後將訊息交給訊息代理（類似郵局），訊息代理會確保訊息傳送到指定的目的地。目的地：不同的訊息系統有不同的訊息路由模式，但是有

基於Html5 websocket和Python的線上聊天室

握手協議：request中有三個隨機的key值，頭部有兩個，後面body裡是長度為8位元組的key3（括號裡的文字是提示，還有字元間的冒號也是為了看上去清晰才加上的，真正傳輸是沒有的），以此向server傳送一個challenge，server需要根據這三個key計算出一個token，在響應中發回給clien

基於UDP的網路程式設計實現簡單聊天室

import java.io.IOException; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.InetAddress; import java.util.Scanner; pu

Spring boot:WebSocket+SockJS+Stomp實現廣播和點對點訊息傳送

筆記 廣播式 STS工具新建spring boot專案 使用Thymeleaf和Websocket依賴 pom.xml: <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave

spring websocket 和socketjs實現單聊群聊,廣播的消息推送詳解

退出 rec oid -name 返回 classes sockets 們的 tomcat7.0 spring websocket 和socketjs實現單聊群聊,廣播的消息推送詳解 WebSocket簡單介紹 　　隨著互聯網的發展，傳統的HTTP協議已經很難滿足Web應用

Spring Websocket+SockJS+STOMP實現即時通訊（零）—— 要點

Spring Websocket+SockJS+STOMP 實現即時通訊（一）—— 疑問解答 Spring Websocket+SockJS+STOMP 實現即時通訊（二）—— 簡單的訊息代理 Spr

Spring Websocket+SockJS+STOMP 實現即時通訊（三）—— ChannelInterceptor與ExecutorChannelInterceptor

ChannelInterceptor： Message被髮送到執行緒池，在傳送動作執行前（後）攔截，發生在當前執行緒。 ExecutorChannelInterceptor： Message被髮送到執行緒池後，線上程池持有的新執行緒中，在Message

Spring Websocket+SockJS+STOMP 實現即時通訊（四）—— MessageChannel

兩種MessageChannel實現 TemporaryReplyChannel 用於接收單個回覆訊息的臨時通道。在整個斷點除錯過程中沒有追蹤到，所以在這裡不詳細說明。 ExecutorSubscribableChannel 正如字面上所表示的這樣Ex

Spring Websocket+SockJS+STOMP 實現即時通訊（六）—— SubProtocolWebSocketHandler

目錄 WebsocketHandler SubProtocolWebSocketHandler 四個重要成員變數 protocolHandlerLookup 子協議

Spring Websocket+SockJS+STOMP 實現即時通訊（四）—— MessageHandler

目錄 MessageHandler的作用 MessageHandler實現類 兩類MessageHandler有什麼區別？ MessageHandler的作用 上一節中我們提到過，E

Spring Websocket+SockJS+STOMP 實現即時通訊（五）—— UserRegistryMessageHandler與NoOpMessageHandler

目錄 UserRegistryMessageHandler 處理來自其它應用服務的登錄檔廣播 定期廣播本地登錄檔 使用場景 使用條件 啟用配

spring學習七 spring和dynamic project進行整合

啟動 exti 容器 face jar servle 過程 eve ebs 　　spring和web項目進行整合，其實就是在項目啟動時，就創建spring容器，然後在servlet中使用spring容器進行開。 註意：為了頁面可以訪問到servlet，因此servlet必須

Spring學習一(spring概念和ioc入門)

  Spring概念     Spring是一個開源輕量級框架，Spring是於2003 年興起的一個輕量級的Java 開發框架，由Rod Johnson 在其著作Expert One-On-One J2EE Development and Des

Spring的AOP（xml和註解實現AOP，以及代理模式）

AOP術語：    連線點(Joinpoint)：程式執行的某一個特定位置，如類初始前後，方法的執行前後。而Spring只支援方法的連線點。     切點(Pointcut):切點可以定位到相應的連線點，一個切點可以定位多個連線點。&