WebSocket+Flask实现即时弹幕系统--开篇

自从过年开始就消沉到了开学,每天不知道在忙啥,稀里糊涂做点事情就睡觉了
开学了,想做一个东西--弹幕系统

为什么要做这个东西？？

事情说起来有些尴尬.....上一次元旦晚会,工作室要出技术支持下晚会弹幕
上一届学长也没有留下他们具体的措施,就在网上找了下,某部门还要求关注公众号发弹幕
找到了某某微信墙,本来想懒省事,不在造轮子了,最后开场了才发现有人数限制.....
真的很气,回到寝室就决定在下次元旦之前搞出一个微信扫码的弹幕系统
以后应该也都是工作室出技术支持这个弹幕

寒假由于工作室另几个网站要完善一下,然后过年之后也没做很多工作
这个想法,就耽搁到了现在,不着急,下次元旦还有好久.......

大致的思路？？

在开学之初草草搞了下上图的大致流程,打算采用WebSocket和Flask结合
想的是想把基础的功能完成以后,再拓展其他方面,比如根据弹幕数权重抽奖等
整个流程主要是对弹幕内容的检测,没有危险内容就可以直接通过WebSocket即时发送到show页面
没有新消息的时候,取数据库中显示次数比较少的弹幕随机读出到屏幕

其余就是后台的构建,以及与微信开发接口结合的部分
用户发送方面打算采用微信小程序的方式,给用户提供发送界面

为什么选择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的使用。
• 微信小程序的未知迷坑.....

参考链接:
一些样式参考