文档章节

使用Spring websoket实现弹幕

PanDa丶
 PanDa丶
发布于 2017/01/30 00:09
字数 403
阅读 257
收藏 3

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

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

 

© 著作权归作者所有

PanDa丶
粉丝 3
博文 17
码字总数 16121
作品 0
厦门
程序员
私信 提问
Canvas + WebSocket + Redis 实现一个视频弹幕

页面布局 首先,我们需要实现页面布局,在根目录创建 布局中我们需要有一个 多媒体标签引入我们的本地视频,添加输入弹幕的输入框、确认发送的按钮、颜色选择器、字体大小滑动条,创建一个 ...

PandaShen
2018/07/26
0
0
可实现B站 蒙版弹幕 效果的前端组件 —— barrage-ui

barrage-ui Best and lightest barrage component for web ui. 适用于 web 端用户界面和播放器的轻量级弹幕组件 用途 为你的 视频播放器、图片浏览器 等元素挂载弹幕动画 用于实现 B 站(bili...

parksben
01/15
0
0
基于Canvas+Vue的弹幕组件

最近由于项目需要定制化一个弹幕功能,所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿,和大家交流一下 弹幕效果 功能介绍 支持循环弹幕 弹幕不重叠 支持选择轨...

nickyzhang
07/20
0
0
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 ...

yuxiaoliang
2018/07/11
0
0
【小案例】基于色键技术的纯客户端实时蒙版弹幕

导读:本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前,不妨先浏览项目文档,对组件的使用方式和相关接口进行了解。 各位童鞋如果经常...

parksben
01/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部