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