【附源码下载】基于Springboot1.5.2/dubbo2.8.4实现Websocket广播和点对点消息推送

写在前边的话:此项目基于springboot1.5.2版本,dubbo使用2.8.4,使用thymleaf为渲染模板,jdk1.7,如springboot为2.0以上版本,请使用jdk1.8,相关接口实现也均已变更。【本人亲测可用,附源码下载地址,可自行下载】

一. 项目目录结构

二. 相关代码

0. 变量集合

package com.song.config;

/**
 * 常量
 *
 * @author songshijun
 * @time 2018-03-27
 */
public class Constants {

    /**
     * socket常量
     */
    public static class WebSocket{
        public static String WEBSOCKETPATHPERFIX = "/send";
        public static String REGISTRY_MSGCENTER = "/registry/msgcenter";//广播中心地址
        /** 点对点 */
        public static final String P2PPUSHBASEPATH = "/p2p";//点对点消息推送地址前缀
        public static final String P2PPUSHPATH = "/msg";//点对点消息推送地址后缀,地址: /user/用户识别码/msg
        /** 广播地址 */
        public static final String MSGMAPPING_BROADCAST= "/broadcast";//消息代理路径
        public static final String RESPONSE_BROADCAST = "/broadcast/response";//客户端订阅地址接收服务端消息
    }
}

1. websocket相关配置

public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry arg0) {
        arg0.addEndpoint(WebSocket.REGISTRY_MSGCENTER).withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        //服务端发送消息给客户端的域,多个用逗号隔开
        registry.enableSimpleBroker(WebSocket.MSGMAPPING_BROADCAST, WebSocket.P2PPUSHBASEPATH);
        registry.setUserDestinationPrefix(WebSocket.P2PPUSHBASEPATH);//定义一对一推送的时候前缀
        registry.setApplicationDestinationPrefixes(WebSocket.WEBSOCKETPATHPERFIX);//客户端消息推送路由前缀
    }
}

2. 消息实体

WiselyMessage.java

package com.song.model;

/**
 * 发送消息实体类
 *
 * @author songshijun
 * @time 2018-03-27
 */
public class WiselyMessage {
    private String name;

    private String userId;

    public String getName() {
        return name;
    }

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

    public String getUserId() {
        return userId;
    }

    public void setUserId(String userId) {
        this.userId = userId;
    }
}

WiselyResponse.java

package com.song.model;

/**
 * 返回消息实体类
 *
 * @author songshijun
 * @time 2018-03-27
 */
public class WiselyResponse {

    private String responseMessage;

    public String getResponseMessage() {
        return responseMessage;
    }

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

3. 消息发送接口

package com.song.service;

import com.song.model.WiselyResponse;

import java.util.List;

/**
 * 消息发送接口
 *
 * @author songshijun
 * @time 2018-03-27
 */
public interface WebsocketService {
    void send2Users(List<String> users, WiselyResponse msg);
}

4. 消息接口实现类

package com.song.serviceimpl;

import static com.song.config.Constants.WebSocket;
import com.song.model.WiselyResponse;
import com.song.service.WebsocketService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * 消息发送实体类
 *
 * @author songshijun
 * @time 2018-03-27
 */
@Service
public class WebsocketServiceImpl implements WebsocketService{

    @Autowired
    private SimpMessagingTemplate template;

    /**
     * 发送给指定用户
     *
     * @param users
     * @param msg
     */
    @Override
    public void send2Users(List<String> users, WiselyResponse msg) {
        for(String user:users){
            template.convertAndSendToUser(user, WebSocket.P2PPUSHPATH, msg);
        }
    }
}

5. websocket测试主页

<!DOCTYPE html>
<html xmlns:th="http://www.thymleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title th:text="'当前广播站点'+${userId}"></title>
    <link rel="stylesheet" th:href="@{/css/app/websocketBroadcast.css}"/>
</head>
<body>
<div>
    <button id="connect" οnclick="SocketBroad.connect()">连接</button>
    <button id="disconnect" οnclick="SocketBroad.disconnect();">断开连接</button>
</div>
    <div id="conversationDiv">
        <div class="main">
            <div>
                <!-- 广播发送 -->
                <span style="margin-top: 50px">MSG SEND: <input type="text" id="broadcast" placeholder="请输入广播发布的信息"/></span>
                <span><button οnclick="SocketBroad.sendBroadcast();">广播发送</button></span>
                <br/>
                <!-- 点对点发送 -->
                <span style="margin-top: 50px">
                    MSG SEND: <input type="text" id="p2p" placeholder="请输入点对点发布的信息"/>
                    <input type="text" id="toUser" placeholder="请输入要推送的用户ID"/>
                </span>
                <span><button οnclick="SocketBroad.sendP2p();">点对点发送</button></span>
                <br/><br/>

                <!-- 消息推送页面显示 -->
                <span style="margin-top: 50px">Receive the broadcast message</span>
                <span>
                    <p id="response"></p>
                </span>
                <span style="margin-top: 50px">Receive the P2P message</span>
                <span>
                    <p id="response1"></p>
                </span>
            </div>
        </div>
    </div>

    <script type="text/javascript" th:src="@{/js/common/stomp.min.js}"></script>
    <script type="text/javascript" src="/js/common/sockjs.min.js"></script>
    <script type="text/javascript" src="/js/common/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="/js/app/socketBroad.js"></script>
    <script th:inline="javascript">var userId= [[${userId}]];</script>
</body>
</html>

6. 页面逻辑js

var SocketBroad = (function($){
    var stompClient = null;
    /**
     * 连接设置
     *
     * @param connected
     */
    var setConnected = function (connected) {
        document.getElementById('connect').disabled = connected;
        document.getElementById('disconnect').disabled = !connected;
        document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden';
        $('#response').html();
    }
    /**
     * 建立长连接
     */
    var connect = function () {
        var socket = new SockJS('/registry/msgcenter');
        stompClient = Stomp.over(socket);
        stompClient.connect({}, function(frame) {
            setConnected(true);
            console.log('Connected:' + frame);
            //地址订阅
            stompClient.subscribe('/broadcast/response', function(response) {
                console.log(response)
                showResponse(JSON.parse(response.body).responseMessage);
            });
            stompClient.subscribe('/p2p/' + userId + '/msg', function(respnose){
                console.log(respnose);
                showResponse1(JSON.parse(respnose.body).responseMessage);
            });
        });
    }
    /**
     * 断开连接
     */
    var disconnect = function () {
        if (stompClient != null) {
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("Disconnected");
    }
    /**
     * 发布广播消息
     */
    var sendBroadcast = function () {
        var name = $('#broadcast').val();
        stompClient.send("/send/broadcast", {}, JSON.stringify({name:name}));
    }
    var sendP2p = function(){
        var name = $('#p2p').val();
        var userId = $('#toUser').val();
        if(!userId){
            alert("请输入要推送的用户ID");
            return;
        }
        stompClient.send("/send/p2p", {}, JSON.stringify({name:name,userId:userId}));
    }
    /**
     * 渲染接接收的广播消息
     * @param message
     */
    var showResponse = function (message) {
        var response = $('#response');
        response.html(message);
    }
    var showResponse1 = function (message) {
        var response = $("#response1");
        response.html(message);
    }

    return {
        connect:connect,
        disconnect:disconnect,
        sendBroadcast:sendBroadcast,
        sendP2p:sendP2p
    }
})(jQuery)

$(function(){
    SocketBroad.disconnect();
})

三. 实现截图






源码下载地址:https://download.csdn.net/download/u011127348/10311990

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值