WebSocket+Flask實現即時彈幕系統--開篇

自從過年開始就消沉到了開學,天天不知道在忙啥,稀裏糊塗作點事情就睡覺了開學了,想作一個東西--彈幕系統html

爲何要作這個東西？？

事情提及來有些尷尬.....上一次元旦晚會,工做室要出技術支持下晚會彈幕上一屆學長也沒有留下他們具體的措施,就在網上找了下,某部門還要求關注公衆號發彈幕找到了某某微信牆,原本想懶省事,不在造輪子了,最後開場了才發現有人數限制..... 真的很氣,回到寢室就決定在下次元旦以前搞出一個微信掃碼的彈幕系統之後應該也都是工做室出技術支持這個彈幕jquery

寒假因爲工做室另幾個網站要完善一下,而後過年以後也沒作不少工做這個想法,就耽擱到了如今,不着急,下次元旦還有很久.......git

大體的思路？？

在開學之初草草搞了下上圖的大體流程,打算採用WebSocket和Flask結合想的是想把基礎的功能完成之後,再拓展其餘方面,好比根據彈幕數權重抽獎等整個流程主要是對彈幕內容的檢測,沒有危險內容就能夠直接經過WebSocket即時發送到show頁面沒有新消息的時候,取數據庫中顯示次數比較少的彈幕隨機讀出到屏幕github

其他就是後臺的構建,以及與微信開發接口結合的部分用戶發送方面打算採用微信小程序的方式,給用戶提供發送界面web

爲何選擇WebSocket和Flask??

淺顯的一個實時性鏈接,延遲小,同時數據包頭的修改,開銷也很小等並且發現它能夠不考慮跨域,後來查到由於webSocket協議沒有同源限制 (並且前些時候WebSocket很火,對於作彈幕這種東西實時性也正符合吧)算法

至於Flask,一開始作web開發就是用的這個框架,後來在Miguel Grinberg大神博客發現了Flask-SocketIO 哇,正符合我想要搞的這個東西,感受Flask完成這個東西仍是足以的數據庫

目前簡單的例子

彈幕內容滾動部分,仍是不想造輪子了,用了yaseng/jquery.barrager.js 彈幕show頁面就少了不少麻煩,目前模仿Flask-SocketIO官方文檔完成基本發送模塊小程序

//index.js文件監聽index.html的發送事件
    var socket = io.connect();

    socket.on('connect', function () {
        socket.emit('connect_event', {
            data: encodeURI('鏈接成功！')
        });
    })

    $('form#emit').submit(function (event) {
        socket.emit('client_event', {
            data: encodeURI($('#emit_data').val())
        });
        return false;
    });

    //run.py中定義事件名併發送消息
    @newSocket.on('client_event')
	def client_msg(msg):
    	print(msg)
    	newSocket.emit('server_response', {'data': msg['data']})

	@newSocket.on('connect_event')
	def connected_msg(msg):
    	print(msg)
    	newSocket.emit('server_response', {'data': msg['data']})

    //show.js中監聽response並根據彈幕滾動插件顯示到屏幕
    var socket = io.connect();

    socket.on('server_response', function (msg) {
        var item = {
            img: 'static/images/haha.gif', //圖片,微信接口受權後爲用戶頭像
            info: decodeURI(msg.data), //文字
            close: true, //顯示關閉按鈕 
            speed: 12, //延遲,單位秒,默認6
            // bottom: 500, //距離底部高度,單位px,默認隨機 
            // box_color: '', //氣泡背景顏色,默認灰色
            // color: '#' + Math.floor(Math.random() * 0xffffff).toString(16), //顏色,默認粉紅
            old_ie_color: '#000000', //ie低版兼容色,不能與網頁背景相同,默認黑色 
        }
        $('body').barrager(item);
    });

對於之後的幾個思考？？(之後來補或者寫之後博客裏)

既然是彈幕系統,讀取的時候是否是要作緩存？
對於抽獎,根據彈幕數作權重進行隨機的算法？？(之前的那個項目實際意義上並非真正的權重隨機)
數據庫查詢方面,應該要作些優化,以及取數據的時候的一些循環和List的使用。
微信小程序的未知迷坑.....

參考連接: 一些樣式參考segmentfault