资讯专栏INFORMATION COLUMN

Web实时弹幕原理分析

tigerZH / 3695人阅读

摘要:官方地址支持协议用于实时通信和跨平台的框架。如实时分析系统二进制流数据处理应用在线聊天室在线客服系统评论系统等。官方地址动画效果是一款优雅的网页弹幕插件支持显示图片文字以及超链接。

废话不多说,首先上效果图。

效果图

用途

搞活动、年会的时候,在大屏幕上实时显示留言、吐槽。

在视频网站上,将大家的吐槽实时展示出来。

...

原理

其他原理挺简单的,就是将大家的留言实时展示出来。

注意点:实时性、动画效果、数据存储。

实时性

首先我们会想到,Ajax轮循 简单,粗暴。

客户端和服务器之间会一直进行连接,每隔一段时间就询问一次。

客户端会轮询,判断有没有新消息。

这种方式连接数会很多,一个接受,一个发送。

而且每次发送请求都会有Http的Header,会很耗流量,也会消耗CPU的利用率。

所以,这个方案是不可取的。

可以通过长连接,socket.io 来实现。

Socket.IO 官方地址:http://socket.io/

Socket.IO 支持 WebSocket 协议、用于实时通信和跨平台的框架。

Socket.IO 设计的目标是构建能够在不同浏览器和移动设备上良好运行的实时应用。

如实时分析系统、二进制流数据处理应用、在线聊天室、在线客服系统、评论系统、WebIM等。

目前,Socket.IO 已经支持主流PC浏览器(IE、Safari、Chrome、Firefox、Opera等)。

移动平台上的浏览器(iOS平台下的Safari、Android平台下的基于Webkit的浏览器等)。

Socket.IO 实现了实时、双向、基于事件的通讯机制,它解决了实时的通信问题,并统一了服务端与客户端的编程方式。

启动了Socket以后,就像建立了一条客户端与服务端的管道,两边可以信息互通。

利用Socket.IO 与 Workerman 结合 ,双剑合璧。

Workerman 官方地址:http://www.workerman.net/

动画效果

CommentCoreLibrary
http://jabbany.github.io/Comm...

GoEasy
http://goeasy.io/www/demo/bar...

jquery.barrager.js

Jquery.barrager.js 是一款优雅的网页弹幕插件,支持显示图片,文字以及超链接。

支持速度、高度、颜色、数量等自定义

链接:http://yaseng.org/jquery.barr...

大家可以浏览上面提供的Demo,根据自己的实际需求进行修改,优化。

数据存储

切记不要每次发送数据的时候实时插入的数据库中,可以利用异步处理。

首先将数据存储到缓存中,异步将缓存的数据同步到数据库中。

效果图的实现方法:

Socket.IO + Workerman + jquery.barrager.js

大家可以关注微信公众号,回复 “弹幕源码”,即可获取源码。

推荐阅读

系统的讲解 - SSO 单点登录

系统的讲解 - PHP WEB 安全防御

系统的讲解 - PHP 缓存技术

系统的讲解 - PHP 接口签名验证

系统的讲解 - PHP 浮点数高精度运算

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/22109.html

相关文章

  • 前端基础入门

    摘要:手把手教你做个人火的时候,随便一个都能赚的盆满钵满,但是,个人没有服务端,没有美工,似乎就不能开发了,真的是这样的吗秘密花园经典的中文手册。涵盖前端知识体系知识结构图书推荐以及入门视频教程,全的简直不要不要的了。 JavaScript 实现点击按钮复制指定区域文本 html5 的 webAPI 接口可以很轻松的使用短短的几行代码就实现点击按钮复制区域文本的功能,不需要依赖 flash。...

    shinezejian 评论0 收藏0
  • 【小案例】基于色键技术的纯客户端实时蒙版弹幕

    摘要:组件提供了一系列的操作接口以方便用户对弹幕的相关特性进行定制。对于这种类型的图像,我们可以使用色键的方式进行抠图生成蒙版。其中,用于更新蒙版的接口为。 导读:本文内容是笔者最近实现的 web 端弹幕组件—— Barrage UI 的一个延伸。在阅读本文的实例和相关代码之前,不妨先浏览项目文档,对组件的使用方式和相关接口进行了解。 各位童鞋如果经常上 B 站(bilibili.com) ...

    muzhuyu 评论0 收藏0
  • 2016年云巴产品更新合集

    摘要:实时弹幕使用云巴,直播平台可快速实现视频直播中发送弹幕打赏点赞等实时互动功能。云巴聊天室支持图片上传文件发送文档评论系统正式上线新增搜索功能,我们会做得更好。 SDK 篇 Android SDK 更新 Release 1.6.3后台进程相互拉起的特殊版本 Release 1.6.4增加 so 文件 Release 1.8.0支持小米、华为推送,无需注册第三方账号 Release 1....

    CoffeX 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<