软件工程大实习 PPT1.1

13 0 2018-05-10

棒棒棒棒棒棒棒棒棒棒棒

<p>点击输入文字</p><p>点击输入文字</p><p>点击输入文字</p><p>我们的大实习超级棒的</p><p>弹幕弹幕 一个线下场景弹幕解决方案</p><p>来自 皮彩娟(组长) 徐跃民 小组</p><p>请大家微信或者任何浏览器扫一扫这个二维码哦<br />选择访问原网页,等上几十秒就可以看到界面啦</p><p>目录</p><p>项目简介</p><p>项目模块</p><p>性能优化</p><p>软件工程</p><p> 我们的项目是一个基于线下宣讲场景的整体解决方案。<br /><br /> 像我这样的宣讲主办者,下载了pc客户端之后,创建好房间,将二维码贴在宣讲现场。<br /><br /> 宣讲的观众通过扫描二维码,加入房间,即可发送弹幕至宣讲屏幕上。<br />大家可以试一下哦。</p><p>pc客户端</p><p>· 主要负责主办方的房间创建以及管理设置等操作<br />· 徐跃民</p><p>小程序端</p><p>· 主要负责用户的消息发送等操作<br />· 皮彩娟</p><p>web网站</p><p>· 由于小程序无法过审,临时写了一个给大家发消息<br />· 主要负责用户的消息发送等操作<br />· 徐跃民</p><p>技术栈<br /> · Electron<br /> · Vue<br />原理<br /> 创建一个透明,点击穿透,永远在最顶层,不显示任务栏图标的窗口用于显示弹幕。</p><p>· 使用websocket连接至服务器<br />· flex布局</p><p>技术栈<br /> · Vue<br /> · Socket.io</p><p>这个项目的主要问题就是,pc端弹幕展示性能的问题啦。<br />由于是基于Electron的,实际上就是一个封装好的浏览器,性能上是有一些问题。<br />我们用了以下几个方法提升弹幕性能<br /> · requestAnimationFrame<br /> · css3动画<br /> · 启用GPU<br /> · 高性能第三方动画库 kute<br />最终采用了第三和第四个方案结合的形式呈现弹幕。</p><p>· 基于Vue提供的Mixin方式实现了插件式的房间管理功能</p><p>· 每一个插件控件只要引入 card Mixin,就获得了房间的属性和弹幕管理功能</p><p>完整的自动化部署发布流程</p><p>·基于AppVeyor实现github代码上传后自动构建、测试与发布</p><p>插件式开发</p><p>· 完整的弹幕生命周期hook(todo)</p><p>遗憾与满足</p><p>遗憾</p><p>满足</p><p>· 会前端的确可以为所欲为<br />· 期间发现了Vue的一点小问题,pull request并被采纳</p><p>· 由于域名没有备案,小程序发布失败<br />· web网站和pc端应用体积过大,需要优化<br />· PC端还有一些遗留bug等待修复</p><p>聊天服务器</p><p>谢谢</p><p>技术栈<br /> · Node<br /> · Socket.io<br /> · koa2<br />功能<br /> · http部分 API 用于创建和管理房间<br /> · socket部分 用于实现多房间聊天功能<br /> · 部署在了heroku服务器上,由于是免 费的,可能会有点慢</p><p></p>