php微信弹幕,基于微信公众号的多房间实时弹幕消息系统

weixin_39585886

于 2021-04-02 17:35:52 发布

阅读量202

点赞数

文章标签： php微信弹幕

项目起始原因

源于数据库课设和以前的一次突发奇想。其实还有其他微信公众号的弹幕系统，但是我发现使用体验不佳，因为那种弹幕系统都是私用，并且只支持同时进行一个房间的使用。所以便萌生了自己写一个的想法。(第一次写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包。

var socket = io.connect('http://localhost');

弹幕实现

因为课设有时间限制的原因，所以没有自己去手动实现弹幕效果，我直接在github上面找了一个基于jQuery的弹幕插件。jQuery.danmu.js(体验还不错)部分核心代码如下：

margin: 0;

padding: 0;

}

html{

width: 100%;

height: 100%;

}

body{

height: 100%;

margin: 0;

}

#danmu{

height: 100%;

width: 100%;

}

#father{

height: 100%;

width: 100%;

}

function bg3(){

var r=Math.floor(Math.random()*256);

var g=Math.floor(Math.random()*256);

var b=Math.floor(Math.random()*256);

return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换

}

$('body').css('margin','0');

$('body').css('padding','0');

var width = document.body.scrollWidth;

var height = document.body.scrollHeight-$('#father').scrollTop;

$("#danmu").danmu({

height: height,

width: width,

zindex :100, //弹幕区域z-index属性

speed:7000, //滚动弹幕的默认速度，这是数值值得是弹幕滚过每672像素所需要的时间(毫秒)

sumTime:65535, //弹幕流的总时间

danmuLoop:true, //是否循环播放弹幕

defaultFontColor:"#FFFFFF", //弹幕的默认颜色

fontSizeSmall:24, //小弹幕的字号大小

FontSizeBig:32, //大弹幕的字号大小

opacity:"0.9", //默认弹幕透明度

topBottonDanmuTime:6000, // 顶部底部弹幕持续时间(毫秒)

SubtitleProtection:true, //是否字幕保护

positionOptimize:false, //是否位置优化，位置优化是指像AB站那样弹幕主要漂浮于区域上半部分

maxCountInScreen: 40000, //屏幕上的最大的显示弹幕数目,弹幕数量过多时,优先加载最新的。

maxCountPerSec: 10000 //每分秒钟最多的弹幕数目,弹幕数量过多时,优先加载最新的。

});

$('#danmu').danmu('danmuStart');

function zanting() {

$('#danmu').danmu('danmuPause');

}

var socket = io.connect('http://localhost');

socket.on('news', function (data) {

console.log(data.data);

var time = $('#danmu').data("nowTime") +1;

var color = bg3(),size = '1';

// var position = Math.floor(Math.random()*3);

var position = '0';

var text_obj = '{ text:"' + data.data + '",color:"' + color + '",size:"' + size + '",position:"' + position + '",time:' + time + '}'; //构造加上了innew属性的字符串danmu对象

var new_obj = eval('(' + text_obj + ')');

$("#danmu").danmu("addDanmu",new_obj);

socket.emit('my other event', { my: 'data' });

});

写在最后的话

代码很粗糙，如果有参考价值的话，希望多多支持。如果有不懂得地方，请提出来，我会尽我全力为您解答的。附上github地址，如果对您有帮助的话，希望给我一个小小的star，这是对我最大的鼓励和支持，前端的路很长，我希望自己能坚持下去！！共勉