弹幕系统聊天室

gateway介绍

• GatewayWorker基于Workerman开发的一个项目框架，用于快速开发TCP长连接应用，例如app推送服务端、即时IM服务端、游戏服务端、物联网、智能家居等等

• GatewayWorker使用经典的Gateway和Worker进程模型。Gateway进程负责维持客户端连接，并转发客户端的数据给BusinessWorker进程处理，BusinessWorker进程负责处理实际的业务逻辑（默认调用Events.php处理业务），并将结果推送给对应的客户端。Gateway服务和BusinessWorker服务可以分开部署在不同的服务器上，实现分布式集群。

• GatewayWorker提供非常方便的API，可以全局广播数据、可以向某个群体广播数据、也可以向某个特定客户端推送数据。配合Workerman的定时器，也可以定时推送数据。

环境搭建

下载安装gateway

root@iZwz94dunl1qornhtnn4gpZ:/www/web/default# wget -c http://www.workerman.net/download/GatewayWorker.zip

root@iZwz94dunl1qornhtnn4gpZ:/www/web/default# unzip GatewayWorker.zip

root@iZwz94dunl1qornhtnn4gpZ:/www/web/default# cd GatewayWorker

协议以及地址

• 注意

ip：

1、如果写0.0.0.0代表监听本机所有网卡，也就是内网、外网、本机都可以访问到

2、如果是127.0.0.1，代表只能本机通过127.0.0.1访问，外网和内网都访问不到

3、如果是内网ip例如:192.168.10.11，代表只能通过192.168.10.11访问，也就是只能内网访问，本机127.0.0.1也访问不了（如果监听的ip不属于本机则会报错）

4、如果是外网ip例如110.110.110.110，代表只能通过外网ip 110.110.110.110访问，内网和本机127.0.0.1都访问不了(如果监听的ip不属于本机则会报错)

port：

端口不能大于65535，请确认端口没有被其它程序占用，否则启动会报错。如果端口小于1024，需要root权限运行GatewayWorker才能有权限监听，否则报错没有权限。

• 修改start_gateway.php文件配置协议地址

root@iZwz94dunl1qornhtnn4gpZ:/www/web/default/GatewayWorker# vim Applications/YourApp/start_gateway.php

文件内容
<?php
/**
 * This file is part of workerman.
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the MIT-LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @author walkor<walkor@workerman.net>
 * @copyright walkor<walkor@workerman.net>
 * @link http://www.workerman.net/
 * @license http://www.opensource.org/licenses/mit-license.php MIT License
 */
use \Workerman\Worker;
use \Workerman\WebServer;
use \GatewayWorker\Gateway;
use \GatewayWorker\BusinessWorker;
use \Workerman\Autoloader;

// 自动加载类
require_once __DIR__ . '/../../vendor/autoload.php';
$gateway = new Gateway("websocket://0.0.0.0:8081");
// gateway名称，status方便查看
$gateway->name = 'Lottery-2019';
// gateway进程数
$gateway->count = 4;
// 本机ip，分布式部署时使用内网ip
$gateway->lanIp = '127.0.0.1';
// 内部通讯起始端口，假如$gateway->count=4，起始端口为4000
// 则一般会使用4000 4001 4002 4003 4个端口作为内部通讯端口 
$gateway->startPort = 2900;
$gateway->registerAddress = '127.0.0.1:1238';


// 当客户端连接上来时，设置连接的onWebSocketConnect，即在websocket握手时的回调
$gateway->onConnect = function($connection)
{
    $connection->onWebSocketConnect = function($connection , $http_header)
    {
         var_dump($_GET, $_SERVER);
    };
};


// 如果不是在根目录启动，则运行runAll方法
if(!defined('GLOBAL_START'))
{
    Worker::runAll();
}

服务器消息处理

当客户端有信息发送过来时，聊天室需要立即处理信息并广播给当前连接了服务器的所有人

• 修改Events.php

<?php
/**
 * This file is part of workerman.
 *
 * Licensed under The MIT License
 * For full copyright and license information, please see the MIT-LICENSE.txt
 * Redistributions of files must retain the above copyright notice.
 *
 * @author walkor<walkor@workerman.net>
 * @copyright walkor<walkor@workerman.net>
 * @link http://www.workerman.net/
 * @license http://www.opensource.org/licenses/mit-license.php MIT License
 */

/**
 * 用于检测业务代码死循环或者长时间阻塞等问题
 * 如果发现业务卡死，可以将下面declare打开（去掉//注释），并执行php start.php reload
 * 然后观察一段时间workerman.log看是否有process_timeout异常
 */
//declare(ticks=1);

use \GatewayWorker\Lib\Gateway;
/**
 * 主逻辑
 * 主要是处理 onConnect onMessage onClose 三个方法
 * onConnect 和 onClose 如果不需要可以不用实现并删除
 */
class Events
{
    /**
     * 当客户端连接时触发
     * 如果业务不需此回调可以删除onConnect
     * 
     * @param int $client_id 连接id
     */
//    public static function onConnect($client_id)
//    {
//        // 向当前client_id发送数据
//        Gateway::sendToClient($client_id, "Hello $client_id\r\n");
//        // 向所有人发送
//        Gateway::sendToAll("$client_id login\r\n");
//    }
/**
    * 当客户端发来消息时触发
    * @param int $client_id 连接id
    * @param mixed $message 具体消息
    */
   public static function onMessage($client_id, $message)
   {
        // 向所有人发送 \n表示字符串结束
        Gateway::sendToAll("$message\n");
   }

   /**
    * 当用户断开连接时触发
    * @param int $client_id 连接id
    */
   public static function onClose($client_id)
   {
       // 向所有人发送 
//       GateWay::sendToAll("$client_id logout\r\n");
   }
}

运行服务器

后台运行聊天室
root@iZwz94dunl1qornhtnn4gpZ:/www/web/default/GatewayWorker# php start.php start -d

建立移动端聊天室

下面代码重的静态资源我这里就先不提供了，各位看官自行修改一下就行了。
里面有一些代码涵盖了以前的红包系统等，看官可无视。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>翰文聊天室</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <script type="text/javascript">
        // 取消橡皮筋事件
        // document.addEventListener('touchstart', function (e) {
        //   e.preventDefault();
        // });
    </script>
    <style type="text/css">

        html {
            font-family:Helvetica;
            font-size:62.5%;
            color:#222;    /**不建议使用纯黑，会显得呆板**/
            background-image: url(__STATIC__/img/wechat_bg.png);
            background-position: 0 0;
            background-size: 100% 100%;
        }
        html,body {
            margin:0;
            padding:0;
            height:100%;
            width:100%;
        }
        ::selection{
            background-color: #b3d4fc;  /*被选中的背景*/
            text-shadow: none;  /*被选中的阴影*/
        }

        /*设置无序列表的样式*/
        ul {
            margin: 0;
        }
        li {
            list-style: none;
        }
        input {
            tap-highlight-color:rgba(0,0,0,0);;
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }
    </style>
    <style type="text/css">
        body {
            position:relative;
        }
        /*聊天内容区*/
        .cont-box {
            width:100%;
            height:90%;
            position:absolute;
            left:0;
            top:0;
            padding:0 2rem .5rem;
            box-sizing: border-box;
            font-size:1.6rem;
            overflow-y: auto;
            overflow-x: hidden;
        }
        #weChatBody {
            height:auto;
        }
        .cont-box div {
            /*border:1px solid blue;*/
            margin-top:12px;
        }
        /*昵称*/
        .cont-box div .nickname {
            color: #fb6846;
        }
        /*内容*/
        .cont-box div .content {
            /*color: #fb6846;*/
        }
        /*聊天输入区域*/
        .input-box {
            position:fixed;
            /*height:2rem;*/
            width:100%;
            left:0;
            bottom:0;
            border-top:1px solid #fcad9b;
            border-bottom:1px solid #fcad9b;
        }

        .i-box {
            padding:1rem;
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            justify-content: space-around;
            align-items: center;
            flex-wrap:nowrap;
            background-color: rgba(255,255,255,.5);
        }
        .i-box .b-item {
            height:2.8rem;
            line-height: 2.8rem;
            font-size:1.6rem;
            position:relative;
            overflow: hidden;
            border:1px solid #fb6846;
        }
        .i-box .item1{
            width:10%;
            border-radius:5rem;
            font-size:1.2rem;
            text-align:center;
            color:#fb6846;
        }
        .i-box .item2{
            width:60%;
            border-radius:10px;
            padding:0 5px;
            box-sizing: border-box;
        }
        .i-box .item3{
            width:13%;
            padding:0 5px;
            height:2.8rem;
            border-radius:5px;
            text-align:center;
            white-space:nowrap;
            color:#fff;
            background-color:#ddd;
            border:1px solid #ddd;
        }
        /*输入框*/
        .item-input {
            overflow: hidden;
            background-color:#fff;
            border:none;
            outline: none;
            /*border:1px solid #eee;*/
            white-space:nowrap;
            tap-highlight-color:rgba(0,0,0,0);
            -webkit-tap-highlight-color:rgba(0,0,0,0);
        }

        /*更换样式*/
        .input-style {
            height:0;
            width:100%;
            background-color:#fff;
            display:flex;
            overflow: hidden;
            display:-webkit-flex;
            flex-direction:row;
            justify-content: space-around;
            align-items: center;
            flex-wrap:wrap;
            transition:.2s;
            -webkit-transition:.2s;
        }
        .s-item {
            width:27%;
            height:5rem;
            position:relative;
        }
        .input-style .s-item:nth-of-type(1) {
            background-color:#222;
        }
        .input-style .s-item:nth-of-type(2) {
            background-color:#ff0002;
        }
        .input-style .s-item:nth-of-type(3) {
            background-color:#fcff00;
        }
        .input-style .s-item:nth-of-type(4) {
            background-color:#1eff00;
        }
        .input-style .s-item:nth-of-type(5) {
            background-color:#096bff;
        }
        .input-style .s-item:nth-of-type(6) {
            background-color:#ff00d5;
        }
        .input-style .active {
            opacity:.7;
        }
        .input-style .active i {
            position:absolute;
            opacity:.7;
            bottom:0;
            right:0;
            height:3rem;
            width:3rem;
            background-image: url(__STATIC__/img/style_choosed.png);
            background-position: center center;
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        /*红包*/
        .redpack {
            position:absolute;
            width:100%;
            height:100%;
            left:0;
            top:0;
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            justify-content: center;
            align-items: center;
            background-color: rgba(0,0,0,.8);
            display:none;
            z-index: 9999;
        }
        /*r-item == redpack-item*/
        .r-item {
            position:absolute;
            top:-100%;
            transition:.2s;
            height:60%;
            width:100%;
            /* background-image: url(./img/redpack_boot.gif); */
            /*background-image: url(./img/redpack_opened.png);*/
            background-position: center center;
            /* background-repeat: no-repeat; */
            background-size: 100% 100%;
            display:flex;
            display:-webkit-flex;
            flex-direction:column;
            justify-content: center;
            align-items: center;
        }
        /*领取到红包后，显示的文字*/
        .r-item .info-item {
            width:50%;
            height:20%;
            color:#fff;
            font-size:3rem;
            text-align:center;
            /*border:1px solid yellow;*/
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            justify-content: center;
            align-items: center;
            display:none;
        }
        /*四条边界，用于关闭红包窗口*/
        .r-side {
            position:absolute;
            /*border:1px solid yellow;*/
            display:none;
        }
        .r-side1 {
            height:25%;
            width:100%;
            left:0;
            top:0;
        }
        .r-side2 {
            height:25%;
            width:100%;
            left:0;
            bottom:0;
        }
        .r-side3 {
            height:100%;
            width:15%;
            left:0;
            top:0;
        }
        .r-side4 {
            height:100%;
            width:15%;
            right:0;
            top:0;
        }
    </style>
</head>
<body>
<div class="cont-box">
    <div id="weChatBody">
    </div>
</div>
<div class="input-box">
    <div class="i-box">
        <div class="b-item item1" id="weChatStyle">样式</div>
        <div class="b-item item2 item-input" id="weChatInput"  contenteditable="true"></div>
        <div class="b-item item3" id="sendMessage">发送</div>
    </div>
    <div class="input-style">
        <div class="s-item active" data-color="#222"><i></i></div>
        <div class="s-item" data-color="#ff0002"><i></i></div>
        <div class="s-item" data-color="#fcff00"><i></i></div>
        <div class="s-item" data-color="#1eff00"><i></i></div>
        <div class="s-item" data-color="#096bff"><i></i></div>
        <div class="s-item" data-color="#ff00d5"><i></i></div>
    </div>
</div>
<!-- 红包 -->
<div class="redpack">
    <div class="r-item">
        <div class="info-item"></div>
        <div class="info-item money-item"><p>¥2.00元</p></div>
    </div>
    <!-- 周围的四个可以点击使得红包消失的条 -->
    <div class="r-side r-side1"></div>
    <div class="r-side r-side2"></div>
    <div class="r-side r-side3"></div>
    <div class="r-side r-side4"></div>
</div>
<input type="hidden" name="nickname" id="nickNameVal" value="{$user.user_name}">
</body>
<script type="text/javascript">

    // 工具函数
    function gObj(obj){
        return document.querySelector(obj);
    }

    function ajax(method, url, data, success)
    {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        if (method == 'get' && data) {
            url += '?' + data;
        }

        xhr.open(method,url,true);
        if (method == 'get') {
            xhr.send();
        } else {
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

        xhr.onload = function() {
            success && success(xhr.responseText);
        }
        xhr.onerror = function(){
            console.log('错误信息：' + xhr.status);
        }
    }
</script>
<!--<script src="/socket.io.js"></script>-->
<script type="text/javascript">
    // 聊天框的高度oBox_h
    // 输入框对象 oInput
    // 用户昵称oNickname
    // 所有颜色样式的对象aStyleColor
    var oBox_h = gObj('.cont-box').offsetHeight;
    var oInput = gObj('#weChatInput');
    var oSendBtn = gObj('#sendMessage');
    var oNickname = gObj('#nickNameVal').value;
    var aStylecolor = document.querySelectorAll('.input-style div');
    var oDatas = '';
    var re = /^[\s\n]*?$/i; // 判断输入的内容是否为空格，回车，换行符
    // var ren = /[\n]
    var wStyleOff = false; // 样式开关wStyleOff, 默认false，为关闭状体
    var nowColor = '#222'; // 存储当前的样式颜色
    var aRedpack = document.querySelectorAll('.redpack .r-side'); // 获取所有
    var aMoneyItem = document.querySelectorAll('.redpack .info-item'); // 获取所有
    // 触发发送按钮
    oSendBtn.addEventListener(
            'touchstart', function(e){
                if(oInput.innerText == ''){
                    // 先判断内容，如果无值，则点击无效，如果为空格和回车，则提示
                    return;
                }
                this.style.backgroundColor = '#f95833';
            }, false);
    oSendBtn.addEventListener(
            'touchend', function(e){
                // 先判断内容，如果无值，则点击无效，如果为空格和回车，则提示
                if(oInput.innerText == ''){
                    return;
                }
                if(re.test(oInput.innerText)){
                    alert('输入内容必须为有效值');
                    return;
                }
                sendMessage();
            }, false);

    // 更换样式的按钮
    gObj('#weChatStyle').addEventListener(
            'touchend',function(){
                if(!wStyleOff){
                    gObj('.input-style').style.height = '15rem';
                    this.style.borderColor = '#aaa';
                    this.style.color = '#aaa';
                    wStyleOff = true;
                }else{
                    gObj('.input-style').style.height = '0';
                    this.style.borderColor = '#fb6846';
                    this.style.color = '#fb6846';
                    wStyleOff = false;
                }

            }, false);

    // 选择颜色样式
    for(var i=0; i<aStylecolor.length; i++){
        aStylecolor[i].addEventListener(
                'touchend', function(e){
                    for(var j=0; j<aStylecolor.length; j++){
                        aStylecolor[j].className = 's-item';
                    }
                    this.className = 's-item active';
                    nowColor = this.getAttribute('data-color');
                },
                false);

    }

    // 判断输入框的内容是否有值
    oInput.addEventListener(
            'input', function(e){
                if(oInput.innerText.length != ''){
                    oSendBtn.style.backgroundColor = '#fb6846';
                    oSendBtn.style.borderColor = '#fb6846';
                }else{
                    oSendBtn.style.backgroundColor = '#ddd';
                    oSendBtn.style.borderColor = '#ddd';
                }
            }, false);
    // 点击聊天输入框
    oInput.addEventListener(
            'touchend', function(e){
                gObj('.input-style').style.height = '0';
                gObj('#weChatStyle').style.borderColor = '#fb6846';
                gObj('#weChatStyle').style.color = '#fb6846';
                wStyleOff = false;
            }, false);


    /*************************************************************************************************************************************************************************************************************************************************************************/
    var ws = new WebSocket("ws://120.78.64.155:8081");
    ws.onopen = function(e) {
        console.log('已建立连接');
    }
    ws.onmessage = function(evt){
        console.log('接收到服务器返回信息:'+evt.data);
        var data = JSON.parse(evt.data);
        var oDiv = document.createElement('div');
        var oChatBody_h = gObj('#weChatBody').offsetHeight;
        var message = data.text;
        var color = data.color;
        var nickname = data.nickname;
        oDatas = '<span class="content" style="color:'+color+';">'+message+'</span>';
        oDiv.innerHTML = '<b class="nickname" style="color:#fb6846;"><span>'+nickname+'</span>：</b>'+oDatas;
        gObj('#weChatBody').appendChild(oDiv);
        if(oChatBody_h > oBox_h){
            gObj('.cont-box').scrollTop = oChatBody_h;
        }else{
            gObj('.cont-box').scrollTop = oBox_h;
        }
    }
    // 发送聊天内容的函数
    function sendMessage(){
        // oDiv为创建的div对象
        // oChatBody_h为聊天内容区的高度
        // var oDiv = document.createElement('div');
        // var oChatBody_h = gObj('#weChatBody').offsetHeight;
        // oDatas = '<span class="content" style="color:'+nowColor+';">'+oInput.innerText+'</span>';
        // oDiv.innerHTML = '<b class="nickname" style="color:#7590f3;"><span>'+oNickname+'</span>：</b>'+oDatas;
        // gObj('#weChatBody').appendChild(oDiv);
        // 去掉用户输入的回车，换行正则  /[\r\n]/g
        // socket.emit('message', { text: oInput.innerText.replace(/[\r\n]/g, '') ,color: nowColor,nickname:oNickname});
        var msg = oInput.innerText.replace(/[\r\n]/g, '');
        var sendInfo = {
            'text': msg,
            'color': nowColor,
            'nickname': oNickname,
        };
        sendInfo = JSON.stringify(sendInfo);
        ws.send(sendInfo);
        // 清空输入框，还原按钮样式
        oInput.innerText = '';
        oSendBtn.style.backgroundColor = '#ddd';
        oSendBtn.style.borderColor = '#ddd';
        // console.log(gObj('#weChatBody').offsetHeight);
        // 关闭滚动窗口的自动上滚
        // if(oChatBody_h > oBox_h){
        //  gObj('.cont-box').scrollTop = oChatBody_h;
        // }else{
        //  gObj('.cont-box').scrollTop = oBox_h;
        // }
    }
    /*************************************************************************************************************************************************************************************************************************************************************************/

</script>

</html>

弹幕系统

弹幕系统涵盖了公司的抽奖系统，有些css没有删除，请各位看官自行移除一下，当然不移除也不会有问题的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>抽奖系统</title>
    <style type="text/css">
        html {
                font-size:62.5%;
                color:#222;    /**不建议使用纯黑，会显得呆板**/
            }
        /*抽奖引导页面*/
        body,html {
            margin:0;
            padding:0;
            height:100%;
            width:100%;
        }
        /*载入字体*/
        @font-face {
          font-family: gPrize-font01;
          src:url(__STATIC__/css/font/gPrize-font01.ttf);
        }
        html {
            font-family: gPrize-font01;
                background-image: url(__STATIC__/img/boot_bg_static.png);
                background-position: 0 0;
                background-size: 100% 100%;
        }
        /*引导页面*/
        .boot-page {
            height:100%;
            width:100%;
            display:flex;
            display:-webkit-flex;
            flex-direction:column;
            justify-content:center;
            align-items: center;
            /* background-color: #ffc3c3; */
            position:absolute;
            top:0;
            left:0;
        }
        .boot-page .item {
            height:150px;
            text-align:center;
            line-height: 170px;
            color:#fff;
            font-size:42px;
            font-weight:bold;
            text-shadow:5px 2px 6px #111;

            position:relative;
        }
        .boot-page .item:nth-of-type(1){
            width:auto;
        }
        .boot-page .item div {
            float:left;
            height:150px;
        }
        .boot-page .title{
            width:auto;
            margin-right:10px;
            font-size:10rem;
        }
        /* .boot-page .btn{
            width:150px;
            background-image: url(./img/gift_btn.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: center center;

        } */

        /*抽奖系统页面--内容页*/
        .content-page {
            height:100%;
            width:100%;
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            justify-content:space-between;
            align-items: stretch;
            /* background-color: #1a1f39; */
            background-image: url(__STATIC__/img/lottery_bg.png);
            background-position: 0 0;
            background-size: 100% 100%;
            overflow: hidden;
            position:absolute;
            top:0;
            left:0;
        }
        /* .main-item {
            position:relative;
            overflow-x:hidden;
        } */
        .main-item{
            width:100%;
            overflow:hidden;
        }
        .left-title {
            position:relative;
            height:auto;
            border-bottom:1px solid #ddd;
        }
        .title-level {
            height:60px;
            line-height: 90px;
            text-align:center;
            font-size:25px;
        }
        .left-detail {
            text-align:center;
            padding:0 10px;
            box-sizing: border-box;
        }
        .left-users {
            position: relative;
            box-sizing: border-box;
            z-index: 88;
        }
        .left-users p {
            padding: 9px 15px;
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            justify-content:center;
            align-items: center;
        }
        .left-users p span {
            display:inline-block;
        }
        .left-users .nickname {
            text-indent:30px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        /*左边右下角的猫*/
        .left-right-bottom {
            height:80px;
            width:80px;
            position:fixed;
            z-index: 1;
            right:82%;
            bottom:0;
        }
        .left-right-bottom img {
            height:100%;
            width:100%;
        }
        /*公开透明抽奖区域*/

        .main-item .wrap {
            padding:4.5rem;
            box-sizing: border-box;
            width:100%;
            height:100%;
            position:relative;
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            align-items: center;
            justify-content:space-around;
            flex-wrap: wrap;
            position:absolute;

            left:0;
            top:200%;
        }
        .main-item .wrap .title-name {
            text-align:center;
        }
        .main-item .wrap .item {

            position:relative;
            /* background-color:rgba(255,255,255,.3); */
            display:-webkit-flex;
            flex-direction:row;
            align-items: center;
            justify-content:space-between;
            text-align:center;
        }


        /*手机号码格式*/
        .wrap .item div {
            /*border:1px solid blue;*/
            height:100%;
            /*line-height: 5rem;
            float:left;*/
            /*手机好字体大小*/
            font-size:2.7rem;
            display:flex;
            display:-webkit-flex;
            flex-direction:row;
            align-items: center;
            justify-content:space-between;
            color:yellow;
        }
        .wrap .item div p {
            width:100%;
        }
        .wrap .item .first {
            width:33%;
        }
        .wrap .item .center {
            width:25%;
            font-size:2rem;
        }
        .wrap .item .last {
            width:42%;
        }

        /*41<=num<=50*/
        .main-item .wrap-41-50 .item {
            width:19.2%;
            height:7.8%;
        }

        /*31<=num<=40*/
        .main-item .wrap-31-40 .item {
            width:19.2%;
            height:9.8%;
        }

        /*21<=num<=30*/
        .main-item .wrap-21-30 .item {
            width:19.2%;
            height:14%;
        }

        /*11<=num<=20*/
        .main-item .wrap-11-20 .item {
            width:23.8%;
            height:15%;
        }
        .main-item .wrap-11-20 div {
            font-size:3.3rem;
        }
        /*1<=num<=10*/
        .main-item .wrap-3-10 .item {
            width:30.8%;
            height:20%;
        }
        .main-item .wrap-3-10 div {
            font-size:5rem;

        }
        .main-item .wrap-3-10 {
            justify-content:space-around;
        }
        .wrap-3-10 .item .first {
            width:35%;
        }
        .wrap-3-10 .item .center {
            width:21%;
        }
        .wrap-3-10 .item .last {
            width:44%;
        }
        /*2<=num<=2*/
        .main-item .wrap-1-2 .item {
            width:42%;
            height:25%;
        }
        .main-item .wrap-1-2 div p{
            font-size:6.6rem;
        }
        .main-item .wrap-1-2 {
            justify-content:space-around;
        }

        /*中间星号字体大小 ---- 放最后*/
        .wrap .item .center {
            font-size:2rem;
        }
        .wrap-1-2 .item .center {
            font-size:4rem;
        }

        /*弹幕*/
        .barrage {
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            z-index: 99999;
            overflow: hidden;
            transform-style:preserve-3d;
            -webkit-transform-style:preserve-3d;
        }
        .b-item {
            position:absolute;
            height:auto;
            width:800px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding:1.3rem 1.5rem;
            /* border-radius: 10rem; */
            font-size:5rem;
            /* background-color: rgba(0, 0, 0, .8); */
            top:90%;
            right:-900px;
            color:#fff;
        }

        /* <!-- 左上角的二维码 --> */
        .boot-page .qr-code {
            width:15rem;
            height:15rem;
            background-image: url(__STATIC__/img/hanwen_year_qrcode.png);
            background-position: center center;
            background-size:100% 100%;
            background-repeat:no-repeat;
            position:relative;
        }
        .boot-page .qr-code p {
            position:absolute;
            font-size:1.9rem;
            padding:0;
            margin:0;
            height:2rem;
            line-height: 2rem;
            width:100%;
            left:0;
            bottom:-2.2rem;
        }

        /* logo区域 */
        .hanwen-logo {
            position:absolute;
            bottom:0;
            left:0;
            height:15rem;
            width:15rem;
            /* background-image: url(__STATIC__/img/hanwen_logo.png); */
            background-position: center center;
            background-size:100% 100%;
            background-repeat:no-repeat;
        }

        /* 彩蛋表情包 */
        #caidan {
            height:300px;
            width:300px;
            position:absolute;
            top:50%;
            left:50%;
            margin-top:-150px;
            margin-left:-150px;
            /* background-image:  */
            background-position: 0 0;
            background-size: 100% 100%;
        }
    </style>
</head>
<body>

    <!-- 弹幕 start-->
    <div class="barrage">
        <div class="b-item" style="display:none;"></div>
        <!-- <div class="b-item"></div> -->
    </div>
    <!-- 弹幕 end-->
    <div class="" id="caidan" style="position:absolute;z-index:999;">

    </div>
</body>
<!-- 弹幕script -->
<script type="text/javascript">
// 工具函数
    function gObj(obj){
        return document.querySelector(obj);
    }

    function ajax(method, url, data, success)
    {
        var xhr = null;
        try {
            xhr = new XMLHttpRequest();
        } catch (e) {
            xhr = new ActiveXObject('Microsoft.XMLHTTP');
        }

        if (method == 'get' && data) {
            url += '?' + data;
        }

        xhr.open(method,url,true);
        if (method == 'get') {
            xhr.send();
        } else {
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.send(data);
        }

        xhr.onload = function() {
            success && success(xhr.responseText);
        }
        xhr.onerror = function(){
            console.log('错误信息：' + xhr.status);
        }
    }
    // var socket = io.connect('http://120.78.64.155:8081');
        // 计时器，计算某个时间段内的弹幕数量
        var ws = new WebSocket("ws://120.78.64.155:8081");
        ws.onopen = function(e) {
            // Check the protocol chosen by the server
            console.log('已建立连接');
        }
        var tm = 1;
        var topvlast = topv = 13;
        ws.onmessage = function(evt){
            console.log('接收到服务器返回信息:'+evt.data);
            var data = JSON.parse(evt.data);
            topv += 8

            if(topv > 65){
                topv = 21;
            }
            barrage(data, topv);
        }

        var timer_m_x = null;
        function barrage(obj, topv){
            var oDiv = document.createElement('div');
            // 字幕wraper对象
             var oBarrage = gObj('.barrage');
            // var oDiv = gObj('.barrage .b-item');

            oDiv.innerText = obj.nickname+':'+obj.text;
            oDiv.className = 'b-item';
            if(obj.color != '#222'){
                oDiv.style.color = obj.color;
            }
            oDiv.x = 0;
            oDiv.style.top = topv + '%';
            setTimeout(function(){
                oBarrage.appendChild(oDiv);
                oDiv.timer = setInterval(function(){

                    oDiv.x -= 1;
                    oDiv.style.transform = 'translateX('+oDiv.x+'px)';

                    if(-oDiv.x > oBarrage.offsetWidth+900){
                        clearInterval(oDiv.timer);
                        oBarrage.removeChild(oDiv);
                    }

                }, Math.random()*10);
            }, Math.random()*1000);
        }

</script>
</html>