2. 程式人生 > >springboot整合websocket實現訊息推送.

springboot整合websocket實現訊息推送.

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

springboot整合websocket實現訊息推送

  • 1.maven配置
  • 2.書寫後端程式碼
  • 3.書寫前端程式碼
  • 4.測試

1.maven依賴

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

2.書寫後端程式碼

1.配置類

package org.hopeframework
 
.biz.service.websocket.config;

import org.hopeframework.biz.service.websocket.constant.Constant;
import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer
 
;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;

/**
 * 功能描述:配置websocket
 * 版本資訊:   Copyright (c)2017
 * 公司資訊:   杭州佐通科技有限公司
 * 開發人員:   xiaohuang
 * 版本日誌:   1.0
 * 建立日期:   2018/5/14 0014
 * 建立時間：  22:36
 * 修改歷史:
 * 時間         開發者      版本號    修改內容
 * ------------------------------------------------------------------
 * 2018/5/14 0014    xiaohuang      1.0         1.0 Version
 */
 

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //config.enableSimpleBroker("/topic");
        //config.setApplicationDestinationPrefixes("/app");
        //服務端傳送訊息給客戶端的域,多個用逗號隔開（這個方法是用來配置伺服器推送的路徑，這裡配置後然後【template.convertAndSend(Constant.PRODUCERPATH, msg);】）這個方法推送才可以生效
        registry.enableSimpleBroker(Constant.WEBSOCKETBROADCASTPATH, Constant.P2PPUSHBASEPATH,Constant.
                CONFIGURATION_OPENMONITOR,Constant.CONFIGURATION_CLOSEMONITOR,Constant.CONFIGURATION_CQUERYMONITORSTATUS,Constant.CONFIGURATION_CREBOOT,
                Constant.CONFIGURATION_ELECTRICMETERSTATE,Constant.CONFIGURATION_ELECTRICMETER,Constant.CONFIGURATION_MONITORNAMEPORT,
                Constant. CONFIGURATION_DATADOURCESET,Constant.CONFIGURATION_MODULECOMMUNICATE,Constant.CONFIGURATION_MODULE);
        //定義一對一推送的時候字首
        registry.setUserDestinationPrefix(Constant.P2PPUSHBASEPATH);
        //定義websoket字首
        registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
        //registry.addEndpoint("/my-websocket").withSockJS();
        //註冊一個Stomp的節點（endpoint）,並指定使用SockJS協議。
       //stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).withSockJS();
        stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).setAllowedOrigins("*").withSockJS();
        //stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).setAllowedOrigins("http://120.26.222.27:8080").withSockJS();
        //stompEndpointRegistry.addEndpoint(Constant.WEBSOCKETPATH).setAllowedOrigins("http://localhost:8080").withSockJS();
    }
}

2.常量類

package org.hopeframework.biz.service.websocket.constant;

/**
 * 功能描述:
 * 版本資訊:   Copyright (c)2017
 * 公司資訊:   杭州佐通科技有限公司
 * 開發人員:   xiaohuang
 * 版本日誌:   1.0
 * 建立日期:   2018/5/14 0014
 * 建立時間：  22:35
 * 修改歷史:
 * 時間         開發者      版本號    修改內容
 * ------------------------------------------------------------------
 * 2018/5/14 0014    xiaohuang      1.0         1.0 Version
 */
public class Constant {
    //webSocket相關配置
    //連結地址
    public static String WEBSOCKETPATHPERFIX = "/ws-push";
    public static String WEBSOCKETPATH = "/endpointWisely";
    //訊息代理路徑
    public static String WEBSOCKETBROADCASTPATH = "/topic";
    //前端傳送給服務端請求地址
    public static final String FORETOSERVERPATH = "/welcome";

    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 實時資料
    public static final String PRODUCERPATH = "/topic/infocurrentdata";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 配置模組
    public static final String CONFIGURATION_MODULE  = "/topic/moduleparamset";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 查詢模組配置
    public static final String CONFIGURATION_MODULECOMMUNICATE  = "/topic/modulecommunicate";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 配置資料埠
    public static final String CONFIGURATION_DATADOURCESET  = "/topic/MonitorDatadourceSet";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 查詢埠配置
    public static final String CONFIGURATION_MONITORNAMEPORT  = "/topic/monitornameport";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 電錶配置配置
    public static final String CONFIGURATION_ELECTRICMETER  = "/topic/electricMeter";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 電錶配置查詢
    public static final String CONFIGURATION_ELECTRICMETERSTATE  = "/topic/electricMeterState";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 重啟
    public static final String CONFIGURATION_CREBOOT  = "/topic/cReboot";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 繼電器開啟
    public static final String CONFIGURATION_OPENMONITOR  = "/topic/openMonitor";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 繼電器關閉
    public static final String CONFIGURATION_CLOSEMONITOR  = "/topic/closeMonitor";
    //服務端生產地址,客戶端訂閱此地址以接收服務端生產的訊息 查詢繼電器狀態
    public static final String CONFIGURATION_CQUERYMONITORSTATUS  = "/topic/cQueryMonitorStatus";
    //點對點訊息推送地址字首
    public static final String P2PPUSHBASEPATH = "/user";
    //點對點訊息推送地址字尾,最後的地址為/user/使用者識別碼/msg
    public static final String P2PPUSHPATH = "/msg";
}

3.訊息類
3.1（後臺傳送訊息實體）

package org.hopeframework.biz.service.websocket.po;

/**
 * 功能描述:
 * 版本資訊:   Copyright (c)2017
 * 公司資訊:   杭州佐通科技有限公司
 * 開發人員:   xiaohuang
 * 版本日誌:   1.0
 * 建立日期:   2018/5/14 0014
 * 建立時間：  22:43
 * 修改歷史:
 * 時間         開發者      版本號    修改內容
 * ------------------------------------------------------------------
 * 2018/5/14 0014    xiaohuang      1.0         1.0 Version
 */
public class WiselyResponse {
    private String responseMessage;

    public WiselyResponse(String responseMessage){
        this.responseMessage = responseMessage;
    }

    public String getResponseMessage() {
        return responseMessage;
    }

    public void setResponseMessage(String responseMessage) {
        this.responseMessage = responseMessage;
    }
}

3.2前臺訊息實體（接收前端訊息實體）

public class WiselyMessage {
    private String name;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

service類（推送方式一【template.convertAndSend（）方法】）
此處程式碼功能可以直接將伺服器資料傳送給前端頁面

@Autowired
    private SimpMessagingTemplate template;

    /**
     * 廣播
     * 發給所有線上使用者
     *
     * @param msg
     */
    public void sendMsg(WiselyResponse msg) {
        template.convertAndSend(Constant.PRODUCERPATH, msg);
    }

    /**
     * 傳送給指定使用者
     * @param users
     * @param msg
     */
    public void send2Users(List<String> users, WiselyResponse msg) {
        users.forEach(userName -> {
            template.convertAndSendToUser(userName, Constant.P2PPUSHPATH, msg);
        });
    }
}

控制器（推送方式二【SendTo】）
這個方法可以用做當頁面傳送給伺服器時伺服器做處理然後回覆前端頁面

@Controller
public class WsController {

    @Resource
    WebSocketService webSocketService;

    @MessageMapping(Constant.FORETOSERVERPATH)//@MessageMapping和@RequestMapping功能類似，用於設定URL對映地址，瀏覽器向伺服器發起請求，需要通過該地址。
    @SendTo(Constant.PRODUCERPATH)//如果伺服器接受到了訊息，就會對訂閱了@SendTo括號中的地址傳送訊息。
    public WiselyResponse say(WiselyMessage message) throws Exception {
        List<String> users = Lists.newArrayList();
        users.add("d892bf12bf7d11e793b69c5c8e6f60fb");//此處寫死只是為了方便測試,此值需要對應頁面中訂閱個人訊息的userId
        webSocketService.send2Users(users, new WiselyResponse("admin hello"));

        return new WiselyResponse("Welcome, " + message.getName() + "!");
    }
}

3.書寫前端程式碼前端頁面

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Spring Boot+WebSocket+廣播式</title>

</head>
<body onload="disconnect()">
<noscript><h2 style="color: #ff0000">貌似你的瀏覽器不支援websocket</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">連線</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">斷開連線</button>
    </div>
    <div id="conversationDiv">
        <label>輸入你的名字</label><input type="text" id="name" />
        <button id="sendName" onclick="sendName();">傳送</button>
        <p id="response"></p>
        <p id="response1"></p>
    </div>
</div>
<!--<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>-->
<script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
<script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script th:inline="javascript">
    var stompClient = null;
    //此值有服務端傳遞給前端,實現方式沒有要求
    var userId = [[${userId}]];

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

    function connect() {
        var socket = new SockJS('/endpointWisely'); //1連線SockJS的endpoint是“endpointWisely”，與後臺程式碼中註冊的endpoint要一樣。
        stompClient = Stomp.over(socket);//2建立STOMP協議的webSocket客戶端。
        stompClient.connect({}, function(frame) {//3連線webSocket的服務端。
            setConnected(true);
            console.log('開始進行連線Connected: ' + frame);
            //4通過stompClient.subscribe（）訂閱伺服器的目標是'/topic/getResponse'傳送過來的地址，與@SendTo中的地址對應。
            stompClient.subscribe('/topic/getResponse', function(respnose){
                showResponse(JSON.parse(respnose.body).responseMessage);
            });
            //4通過stompClient.subscribe（）訂閱伺服器的目標是'/user/' + userId + '/msg'接收一對一的推送訊息,其中userId由服務端傳遞過來,用於表示唯一的使用者,通過此值將訊息精確推送給一個使用者
            stompClient.subscribe('/user/' + userId + '/msg', function(respnose){
                console.log(respnose);
                showResponse1(JSON.parse(respnose.body).responseMessage);
            });
        });
    }


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

    function sendName() {
        var name = $('#name').val();
        //通過stompClient.send（）向地址為"/welcome"的伺服器地址發起請求，與@MessageMapping裡的地址對應。因為我們配置了registry.setApplicationDestinationPrefixes(Constant.WEBSOCKETPATHPERFIX);所以需要增加字首/ws-push/
        stompClient.send("/ws-push/welcome", {}, JSON.stringify({ 'name': name }));
    }

    function showResponse(message) {
        var response = $("#response");
        response.html(message);
    }
    function showResponse1(message) {
        var response = $("#response1");
        response.html(message);
    }
</script>
</body>
</html>

測試
這裡寫圖片描述
點選連線控制檯輸出
這裡寫圖片描述
表示連線成功並且訂閱了兩個地址
這裡寫圖片描述
此時在文字框內輸入任意值
結果如圖所示則代表成功
這裡寫圖片描述
這裡寫圖片描述
控制檯中顯示依次為,傳送資訊,目標長度內容
這裡寫圖片描述
此時服務端控制器接收到請求
這裡寫圖片描述
同時給指定使用者傳送了訊息,所以控制檯接收到訊息
這裡寫圖片描述
同時因為控制器有註解@SendTo所以會向@SendTo的地址廣播訊息,客戶端訂閱了廣播地址所有控制檯顯示接收了訊息
這裡寫圖片描述

結束
遇到跨域問題

在配置bean中修改為 registry.addEndpoint(“/stomp”).setAllowedOrigins(“*”).withSockJS();
要讓三個地址在一個階段以及圖上圈住的部分
這裡寫圖片描述

目錄

相關推薦

springboot整合websocket實現訊息推送.

springboot整合websocket實現訊息推送 1.maven配置 2.書寫後端程式碼 3.書寫前端程式碼 4.測試 1.maven依賴 <dependency> <groupId>org

【websocket】springboot使用websocket實現訊息推送

首先我們引用Spring-boot所帶的websocket依賴: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>s

[ Spring Boot ] 整合 Websocket 實現訊息推送框架的設計筆記

前段時間，專案中用Websocket實現了一套後臺向前端推送的Service層搭建，感興趣的童鞋可以瞭解下^_^Maven pom<dependency> <groupId&g

使用SpringBoot快速搭建WebSocket實現訊息推送

本文旨在幫助未掌握此技能的小白掃清障礙，快速搭建websocket訊息推送服務，高手請繞行。謝謝！ 首先，筆者的寫作背景也是一名剛剛打通websocket訊息推送服務的小白。在連續幾日的蒐集資料下，最終在沒有找到一個完整的解決方案的情況下。摸索出正確的結果，倍

WebSocket實現訊息推送

引言 最近專案中需要實現訊息推送需求，首先想到就是用webscket來實現IM，之前瞭解過這個東西，但是很久沒有用了，所以需要來弄個demo熱熱身，這樣在專案中使用的時候，會更靠譜些。先來看一下最後的效果：          一、Socket簡介 Socket又稱"套

spring boot 整合websocket實現實時推送

websocket暫時能想到的應用是瀏覽器聊天和後臺日誌實時顯示到前臺。 當後臺啟動程式後，等待前臺連線，連線上之後，前後臺就可以相互發送資料了。 先貼上pom配置： <dependency> <groupId&g

springboot整合websocket & 伺服器主動推送資料到前端

       一般前端請求伺服器介面都是使用主動請求的模式，有ajax等。但分不同使用場景 有不一樣的需求， 比如要求實時性比較高的場景使用ajax則不好實現，且實現了開銷也大。所以有了websocket這種長連結的形式保持在前端與伺服器的通訊協議。 現在很多後端框架都使用

使用Websocket實現訊息推送（心跳）

0x00 心跳 本來以為寫完了，結果最近和一個同事在討論心跳的事情，這裡再做一個補充。先說我的結論： WebSocket協議已經設計了心跳，這個功能可以到達檢測連結是否可用 心跳是用來檢測連結是否可用的，不一定支援攜帶資料，可要看具體實現 如果非要心跳中帶

(二)websocket實現訊息推送之基於spring4.0實現

  1、新建springBoot專案，新增依賴        &n

springboot整合websocket實現一對一訊息推送和廣播訊息推送

springboot基礎環境 請參考springboot文件 maven依賴    

Springboot+websocket+定時器實現訊息推送

由於最近有個需求，產品即將到期(不同時間段到期)時給後臺使用者按角色推送，功能完成之後在此做個小結 1. 在啟動類中添加註解@EnableScheduling import org.mybatis.spring.annotation.MapperScan; import

springboot整合rabbitMQ實現訊息的推送

RabbitMQ訊息中介軟體元件，目前比較流行的訊息中介軟體有:RabbitMQ、RocketMQ、ActiveMQ、Kafka等。 我的程式碼中用的是RabbitMQ，先介紹幾個概念：       一：訊息佇列的特性如下： 非同步性，將耗時的同步操作通過以傳送訊息的方

Android開發-在Android應用裡整合友盟訊息推送SDK的實現（相容小米、華為、魅族機型離線推送）

前 言 最近由於專案的功能需求的需要，需要在Android應用整合訊息推送的功能，而目前市面上的第三方訊息推送除了友盟推送外，還有極光推送、小米推送、個推以及信鴿（騰訊）推送等。當時本人對比各大第三方的訊息推送進行了測試，覺得友盟訊息推送整合簡單，推送訊息的

Go websocket 做訊息推送（視訊彈幕的簡單實現原理）

server.go package main import ( "github.com/gorilla/websocket" "net/http" "socket/impl" "time" ) var ( upGrader = websocket.Upgr

SpringBoot中使用Websocket進行訊息推送

WebsocketConfig.java @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return

ssm中spring websocket 實現伺服器推送訊息 以及 一對一聊天

上網看了很多方式，最後覺得這種方式比較簡單易懂，這邊主要有三個類（包括註解的配置檔案）就可以實現後臺內容文末會展示結果例項，如果是你所需要的效果，直接拿去用吧~專案中複製直接用本文根據網上整理並修改！！！本文思路來自：連結現在開始。開始前請確保pom已經引入需要的包首先是配置

Netty+WebSocket簡單實現訊息推送

依賴 <dependencies> <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artifact

實現websocket 主動訊息推送，用laravel+Swoole

近來有個需求：想實現一個可以主動觸發訊息推送的功能，這個可以實現向模板訊息那個，給予所有成員傳送自定義訊息，而不需要通過客戶端傳送訊息，服務端上message中監聽傳送的訊息進行做相對於的業務邏輯。 主動訊息推送實現平常我們採用 swoole 來寫 WebSocket 服務可能最多的用到的是open,me

使用websocket進行訊息推送服務

Websocket主要做訊息推送，簡單，輕巧，比comet好用 入門瞭解：https://www.cnblogs.com/xdp-gacl/p/5193279.html   /** * A Web Socket session represents a conversation bet

springboot整合redis實現訊息佇列

在java中直接使用redis的時候，直接使用簡單的兩個指令lpush和rpop或者rpush和lpop就可以實現訊息佇列的操作。當與spring結合時，可以使用RedisTemplate和StringRedisTemplate；這兩個Template是spring封裝了對Redis的一些常用的