Web实时弹幕原理分析

时间 2019-11-15

标签 web 实时原理分析栏目 HTML 繁體版

原文原文链接

废话很少说，首先上效果图。jquery

效果图git

用途github

原理数据库

其余原理挺简单的，就是将你们的留言实时展现出来。编程

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

实时性浏览器

首先咱们会想到，Ajax轮循简单，粗暴。缓存

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

客户端会轮询，判断有没有新消息。微信

这种方式链接数会不少，一个接受，一个发送。

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

因此，这个方案是不可取的。

能够经过长链接，socket.io 来实现。

Socket.IO 官方地址：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 官方地址：www.workerman.net/

动画效果

jquery.barrager.js

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

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

你们能够浏览上面提供的Demo，根据本身的实际需求进行修改，优化。

数据存储

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

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

效果图的实现方法：

Socket.IO + Workerman + jquery.barrager.js

你们能够关注微信公众号，回复 “弹幕源码”，便可获取源码。

Thanks ~

做者：PHP后端开发者

免费提供技术咨询服务（本身懂的知识）。

QQ群：564557094。

关注微信公众号，留言便可，看到留言后会及时回复。