使用Spring websoket实现弹幕

时间 2019-11-15

原文原文链接

本博客介绍的功能为打开公众号每每里面发消息，网页上则已弹幕的形式将消息内容展示(微信公众号的配置这里不作详细说明)。javascript

1.基础环境java

这里使用的是spring boot作项目环境搭建，须要添加websocket依赖包jquery

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

2.配置web

@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.业务实现spring

这里先说一下simpleMessagingTemplate,simpleMessagingTemplate是Spring-WebSocket内置的一个消息发送工具，能够将消息发送到指定的客户端。微信

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

须要引入的jswebsocket

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

js代码:socket

//先构建一个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插件。ide

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