彈幕系統聊天室

gateway介紹

GatewayWorker基于Workerman開發的一個項目架構，用于快速開發TCP長連接配接應用，例如app推送服務端、即時IM服務端、遊戲服務端、物聯網、智能家居等等
GatewayWorker使用經典的Gateway和Worker程序模型。Gateway程序負責維持用戶端連接配接，并轉發用戶端的資料給BusinessWorker程序處理，BusinessWorker程序負責處理實際的業務邏輯（預設調用Events.php處理業務），并将結果推送給對應的用戶端。Gateway服務和BusinessWorker服務可以分開部署在不同的伺服器上，實作分布式叢集。
GatewayWorker提供非常友善的API，可以全局廣播資料、可以向某個群體廣播資料、也可以向某個特定用戶端推送資料。配合Workerman的定時器，也可以定時推送資料。

環境搭建

下載下傳安裝gateway

[email protected]:/www/web/default# wget -c http://www.workerman.net/download/GatewayWorker.zip

[email protected]:/www/web/default# unzip GatewayWorker.zip

[email protected]:/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檔案配置協定位址

[email protected]:/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<[email protected]>
 * @copyright walkor<[email protected]>
 * @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<[email protected]>
 * @copyright walkor<[email protected]>
 * @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");
   }
}

運作伺服器

背景運作聊天室
[email protected]:/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>

ubuntu16.04下workerman-gateway實作長連接配接彈幕系統聊天室案例彈幕系統聊天室

彈幕系統聊天室

gateway介紹

環境搭建

下載下傳安裝gateway

協定以及位址

伺服器消息處理

運作伺服器

建立移動端聊天室

彈幕系統

繼續閱讀

第三章 Joomla!擴充開發--後端開發（續2）

Centos 7 Apache配置虛拟主機

PHP進階學習之session寫入資料庫

php寫一個簡潔的登入頁面

Apache與PHP環境下配置本地虛拟主機

Testlink安裝部署之XAMPP

TestLink 圖表中文亂碼問題

ecshop屬性排序

Ubuntu16.04安裝Apache+MySQL+PHP1. 安裝Apache2. 安裝MySQL3. 安裝PHP4. 安裝phpMyAdmin

版本号隐藏

Apache配置SSLApache配置SSL

配置apache支援PHP（win7）

Cloud Studio初體驗

NOSQL安全攻擊

php 去掉字元串的最後一個字元及截取原字元串1,2,3,4,5,6,

php——水印