使用Spring websoket實現彈幕

本博客介紹的功能爲打開公衆號每每裏面發消息，網頁上則已彈幕的形式將消息內容展示(微信公衆號的配置這裏不作詳細說明)。

1.基礎環境

這裏使用的是spring boot作項目環境搭建，須要添加websocket依賴包

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

2.配置

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        //表示客戶端訂閱地址的前綴信息，也就是客戶端接收服務端消息的地址的前綴信息
        config.enableSimpleBroker("/dinner");
        //指服務端接收地址的前綴，意思就是說客戶端給服務端發消息的地址的前綴
        config.setApplicationDestinationPrefixes("/dinner");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        //這個方法的做用是添加一個服務端點，來接收客戶端的鏈接。
        registry.addEndpoint("/gs-guide-websocket").withSockJS();
    }

}

3.業務實現

這裏先說一下simpleMessagingTemplate,simpleMessagingTemplate是Spring-WebSocket內置的一個消息發送工具，能夠將消息發送到指定的客戶端。

simpMessagingTemplate.convertAndSend("/dinner/message",
        sub.setNickName(WechatEmoji.emoji(sub.getNickName()))
                .setContent(WechatEmoji.emoji(sub.getContent())).toJson());

須要引入的js

<t:js value="/webjars/sockjs-client/sockjs.min.js"/>
<t:js value="/webjars/stomp-websocket/stomp.min.js"/>

js代碼:

//先構建一個SockJS對象
var socket = new SockJS($.getContextPath('gs-guide-websocket'));
//用Stomp將SockJS進行協議封裝
stompClient = Stomp.over(socket);
//與服務端進行鏈接，同時有一個回調函數，處理鏈接成功後的操做信息。
stompClient.connect({}, function (frame) {
    console.log('Connected: ' + frame);
    stompClient.subscribe('/dinner/message', function (greeting) {
        var data = JSON.parse(greeting.body);
        console.info('接收到彈幕消息' + data.content);
        addDanmu(data);
        addComment(data);
    });
});

彈幕實現能夠直接使用jquery.barrager.js插件。

var addDanmu = function (data) {
    $('body').barrager({
        "info": data.content,
        "img": data.headImageUrl,
        "close": false,
        "href": "javascript: void(0)"
    });
}