使用Spring websoket实现弹幕

最新推荐文章于 2024-10-15 21:07:36 发布

weixin_34129696

最新推荐文章于 2024-10-15 21:07:36 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

文章标签： java python javascript ViewUI

原文链接：https://my.oschina.net/u/2474041/blog/830751

本文介绍了如何使用Spring Boot和WebSocket技术实现在微信公众号中发送弹幕消息的功能。通过配置和简单的代码示例，展示了客户端和服务端之间的消息传递过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

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

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)"
    });
}

转载于:https://my.oschina.net/u/2474041/blog/830751