摘要:同时借助实现在非接口中推送消息流。每分秒钟最多的弹幕数目弹幕数量过多时优先加载最新的。
项目起始原因
源于数据库课设和以前的一次突发奇想。其实还有其他微信公众号的弹幕系统,但是我发现使用体验不佳,因为那种弹幕系统都是私用,并且只支持同时进行一个房间的使用。所以便萌生了自己写一个的想法。(第一次写md,有点不会,希望谅解--)
主要技术点Redis(结合socket实现在非socket中主动发送socket消息)
MySQL(数据持久化)
socket.io(实现消息实时推送)
Express(后端主要使用框架)
实现的主要技术点和难点接受微信服务器的消息推送
微信服务器推送的消息,我们在Express中通过data数据流的形式接受,然后xml转为json格式。即得到我们需要的数据。部分代码如下(getXml为封装的函数用于处理数据):
// 处理上传消息请求 let promise = new Promise((resolve,reject) => { let buffer = []; //监听 data 事件 用于接收数据 req.on("data",chunk => { buffer.push(chunk); }); //监听 end 事件 用于处理接收完成的数据 req.on("end",() => { let msgXml = Buffer.concat(buffer).toString("utf-8"); xml.xmltool.getXml(msgXml).then(datas => { resolve(JSON.stringify(datas.xml)); }).catch(e => { reject(JSON.stringify(e)); }) }) });
websocket(socket.io)
socket.io是已经封装好的一个库。我们只需要安装之后,就可方便的使用。同时借助Redis实现在非socket接口中推送socket消息流。需要使用到的模块主要是:
socket.io
socket.io-redis
socket.io-emitter
部分核心代码如下(作为一个模块导出直接使用):
const redis = require("redis"); const ioRedis = require("socket.io-redis"); // var roomInfo = {}; let ioCreater = function(server) { const io = require("socket.io")(server); io.on("connection", function (socket) { var url = socket.request.headers.referer; var splited = url.split("/"); var roomID = splited[splited.length - 1]; // 获取房间ID // var user = ""; console.log(socket.request.headers); console.log(roomID); socket.join(roomID); // 加入房间 socket.on("disconnect", function(){ //断开socket连接的时候触发 console.log("user disconnected"); }); socket.on("message", function(){ //接收socket连接消息的时候触发 console.log("received a message"); }); socket.on("connect", function(){ //建立socket连接时候触发 console.log("connect a socket client"); }); }); io.adapter(ioRedis({host:"127.0.0.1", port:"6379" })); //使用socket.io-adapter设置缓存依赖 return io; }; module.exports = ioCreater;
多房间
在使用socket.io的时候,我们很方便的就可以创建socket.io多房间。我们只需要在socket连接的时候带上参数即可。所以在初始化的时候,我们需要将房间号发到前端,前端拿到之后,创建相应的socket连接即可。同时前端页面可以直接使用node_modules里面的socket包。
弹幕实现
因为课设有时间限制的原因,所以没有自己去手动实现弹幕效果,我直接在github上面找了一个基于jQuery的弹幕插件。jQuery.danmu.js(体验还不错)部分核心代码如下:
写在最后的话<%= title %>
代码很粗糙,如果有参考价值的话,希望多多支持。如果有不懂得地方,请提出来,我会尽我全力为您解答的。附上github地址,如果对您有帮助的话,希望给我一个小小的star,这是对我最大的鼓励和支持,前端的路很长,我希望自己能坚持下去!!共勉
github地址
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97974.html
摘要:官方地址支持协议用于实时通信和跨平台的框架。如实时分析系统二进制流数据处理应用在线聊天室在线客服系统评论系统等。官方地址动画效果是一款优雅的网页弹幕插件支持显示图片文字以及超链接。 废话不多说,首先上效果图。 效果图 showImg(https://segmentfault.com/img/bVGo0P?w=521&h=635); 用途 搞活动、年会的时候,在大屏幕上实时显示留言、吐...
阅读 2625·2019-08-30 15:52
阅读 3555·2019-08-29 17:02
阅读 1819·2019-08-29 13:00
阅读 893·2019-08-29 11:07
阅读 3210·2019-08-27 10:53
阅读 1744·2019-08-26 13:43
阅读 963·2019-08-26 10:22
阅读 1225·2019-08-23 18:06