摘要:同時借助實現在非接口中推送消息流。每分秒鐘最多的彈幕數目彈幕數量過多時優先加載最新的。
項目起始原因
源于數據庫課設和以前的一次突發奇想。其實還有其他微信公眾號的彈幕系統,但是我發現使用體驗不佳,因為那種彈幕系統都是私用,并且只支持同時進行一個房間的使用。所以便萌生了自己寫一個的想法。(第一次寫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地址
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/97974.html
摘要:官方地址支持協議用于實時通信和跨平臺的框架。如實時分析系統二進制流數據處理應用在線聊天室在線客服系統評論系統等。官方地址動畫效果是一款優雅的網頁彈幕插件支持顯示圖片文字以及超鏈接。 廢話不多說,首先上效果圖。 效果圖 showImg(https://segmentfault.com/img/bVGo0P?w=521&h=635); 用途 搞活動、年會的時候,在大屏幕上實時顯示留言、吐...
摘要:實時彈幕使用云巴,直播平臺可快速實現視頻直播中發送彈幕打賞點贊等實時互動功能。云巴聊天室支持圖片上傳文件發送文檔評論系統正式上線新增搜索功能,我們會做得更好。 SDK 篇 Android SDK 更新 Release 1.6.3后臺進程相互拉起的特殊版本 Release 1.6.4增加 so 文件 Release 1.8.0支持小米、華為推送,無需注冊第三方賬號 Release 1....
閱讀 2649·2019-08-30 15:52
閱讀 3596·2019-08-29 17:02
閱讀 1844·2019-08-29 13:00
閱讀 922·2019-08-29 11:07
閱讀 3238·2019-08-27 10:53
閱讀 1770·2019-08-26 13:43
閱讀 1016·2019-08-26 10:22
閱讀 1332·2019-08-23 18:06