騰訊雲搭建多終端《你畫我猜》Socket伺服器
結合一個小demo,分享如何用騰訊雲的Socket伺服器代理各種socket請求,實現低延遲,和不同端之間的互動
作者:金朝麟
文章出處:騰雲閣文章
----------------------------------------------------
專案概述
Java課大作業,做一個小遊戲,三人Git協作,不同終端,一個分支三個資料夾互不影響。Demo地址 ,Github地址。先來目睹一下吧!
原理圖
當玩家1在使用畫筆在畫板上進行繪圖工作時,把當前這個玩家的繪圖的資料傳遞到伺服器,然後由伺服器把該資料廣播到其他玩家,其他玩家的畫筆將根據這些資料自動在畫板上進行繪製。因為是多端
Socket
通訊構架,經過協商,使用socket.io框架
,客戶端就可以統一socket.io-Java、socket.io-Android
Socket伺服器端(資料互動)
伺服器地址:http://119.28.67.19:3007/
或者http://game.ycjcl.cc
,採用了騰訊雲的CentOS
7
伺服器(香港區2核 2GB配置),通過Nginx
轉發到Nodejs
的Socket.io
上,進行Websocket
通訊。
服務端關鍵程式碼:
// socket監聽的事件
io.on('connection', function(socket) {
/**
* 畫者事件 drawPath
* 傳入JSON:data
* 例:
* {
beginX: 68
beginY: 182
colorValue: "red"
deviceHeight: 400
deviceWidth: 500
endX: 74
endY: 181
lineValue: 3
* }
*/
socket.on('drawPath', function(data) {
/**
* 廣播事件 showPath
* 將畫者事件接收的data資料,向連線到socket伺服器的客戶端(猜者)進行廣播
* 例:
* socket.on('showPath', (data)=>{
// 自定義畫的方法
this.drawing({json});
});
*
*/
socket.broadcast.emit('showPath' , data);
});
// 監聽客戶端的socket.send(message)方法
socket.on('message', function(message){
// 畫者生成一個隨機的關鍵字
if(message == 'getKeyWord'){
INDEX = Math.floor(Math.random() * keyword.length);
KEYWORD = keyword[INDEX];
// 將生成的關鍵字傳送到畫者的客戶端
socket.emit('keyword', KEYWORD);
// 畫者清空畫布 socket.send('clear')
}else if(message == 'clear'){
// 猜者端清空畫布
console.log('進來了');
socket.broadcast.emit('showBoardClearArea');
// socket.emit('showBoardClearArea');
}else if(message == 'success'){
// 猜對後,清空畫布,更換詞
io.sockets.emit('successClearArea');
}
});
/**
* 猜者提交 submit
* 傳入str: keyword
*
* this.state.socket.emit('submit', keyword)}
*/
socket.on('submit', function(keyword) {
// 標誌位
var bingo = 0;
// 提示
var tip = '';
// 如果
console.log(keyword);
if(keyword && KEYWORD){
if (KEYWORD.toLocaleLowerCase() == keyword.toLocaleLowerCase()) {
console.log('進來了2');
bingo = 1;
}else{
tip = tips[INDEX];
}
}else{
bingo = -1;
}
console.log(bingo);
console.log(tip);
// 將flag標誌位傳到連線的客戶端
socket.emit('answer', {
bingo:bingo,
tip:tip
});
});
socket.on('disconnect', function() {});
});
傳入資料:
因為是多端存在裝置大小差異,經過討論,根據比例進行計算,所以傳入資料中有deviceHeight
和deviceWidth
。
{
"beginX":114, // 起點座標(int) X
"beginY":143, // 起點座標(int) Y
"colorValue":"red", // 線的顏色(str) (#FFA500,orange,rgb(255, 165, 0))
"deviceHeight":400, // 裝置高度(int)
"deviceWidth":500, // 裝置寬度(int)
"endX":122, // 終止座標(int) X
"endY":149, // 終止座標(int) Y
"lineValue":3 // 線的寬度(int)
}
效果圖
Web端
PC端
安卓
總結
通過騰訊雲的Socket伺服器代理各種socket請求,延遲時間較短,基本能達到本地localhost的同步速度,不同端之間的互動也能處理得當。開發過程中也遇到了很多問題,比如另外就Socket
伺服器框架沒有達成共識,PC
端說socket自己用java
寫到本地了(這樣Web
和Android
就用不了了),然後又我提出用NodeJS
的socket.io
去統一寫。Web端我用React
+Webpack
就連起來了,其它端有相應的SDK。伺服器解決後,然後各個端開始歡快地寫起來了。
最後在跨端互動時,也遇到了不少的問題(裝置的比例,需要傳入的值),然後就開始規定介面格式,每個引數的資料結構
和型別
、事例
。
之後,傳到 Github 時也遇到了一些問題,由於其它人對Git
的熟悉程度不一樣,所以 push
是我在他們電腦給push
和pull
上去的。經過此次開發,鍛鍊的團隊協助能力以及對新框架的學習能力。
---------------------------------------------------
獲取更多雲計算技術乾貨,可請前往 騰訊雲技術社群
微信公眾號:騰訊雲技術社群( QcloudCommunity)
相關推薦
騰訊雲搭建多終端《你畫我猜》Socket伺服器
結合一個小demo,分享如何用騰訊雲的Socket伺服器代理各種socket請求,實現低延遲,和不同端之間的互動 作者:金朝麟 文章出處:騰雲閣文章 ---------------------------------------------------- 專案概述
騰訊雲搭建Socks5多IP代理伺服器實現遊戲單視窗單IP搭建教程
騰訊雲搭建Socks5多IP代理伺服器實現遊戲單視窗單IP 騰訊雲多IP Socks5搭建教程 配合代理工具實現 單視窗單IP 1.多IP伺服器選擇 2.伺服器購買 3.建立彈性網絡卡,繫結彈性公網IP 實現多IP 4.如何更換
運用雙騰訊雲搭建《饑荒》多人聯機伺服器
《饑荒》是由Klei Entertainment開發的一款動作冒險類求生沙盒遊戲,是目前較火的一個獨立遊戲。 多人聯機伺服器讓你和你的小夥伴可以合作,共同在沙盒世界裡求得生存。遊戲中有多樣化的道具製作及建築系統,此外怪物們的能力提高並加入更多新道具,給了玩家更多的發揮空間,講究協同作戰的魅力。 需要解決的
騰訊雲-搭建 FTP 文件服務
包含 install tran ria pac tdi form linu vsftp 搭建 FTP 文件服務 目的:搭建認證登錄的FTP具有讀寫權限 安裝並啟動 FTP 服務 任務時間:5min ~ 10min 安裝 VSFTPD 使用 yum 安裝 v
騰訊雲-搭建 .NET Core 開發環境
監聽端口 home 定義 bottom -c apple mkdir -p web 應用 修改 搭建 .NET Core 開發環境 安裝 .Net Core 執行代碼 任務時間:時間未知 .NET Core 的官方文檔很詳細,本實驗帶你建立一個.NET Cor
騰訊雲搭建雲OA指南
雲OA 騰訊雲 OA系統 本文將以PaiOA 2018以例,講解如何在騰訊雲上搭建雲OA,免費申請PaiOA 2018 企業版密鑰(不限用戶)。 PaiOA官網下載http://www.paioa.com 最新PaiOA 2018 系統需求服務器操作系統:Windows Server 2008/2
騰訊雲搭建web環境基礎指導
HP 第一次 可能 設置 遠程 主機列表 .com 開放端口 免費虛擬主機 搭建web環境算是程序員的基礎課了,但實際情況是一個剛出道的程序員都不會有自己的服務器,頂多花幾十塊錢買個域名,申請個免費虛擬主機,隨便用ftp傳個源碼可以裝逼無數了。真要花上幾百大泮的月租
騰訊雲搭建Apache
鹹魚的大三救贖,個人學了python,java,sql,Linux,jsp一大推巴拉巴拉的,眼見就要快畢業了,在最後的大三暑假打算,總合自己的學習,在騰訊雲上面做專案。(只是因為騰訊雲買一年有學生價而阿里雲只有半年) 我們首先在騰訊雲登陸,我用的是集成了java+mysql多版本的centos7
騰訊雲搭建WordPress個人部落格
原作者連結 http://vrfxie.blog.51cto.com/11026252/1877410 現在雲時代,搭建自己個人網站的成本越來越低了,特別是學生。不管你是否從事IT行業,趁騰訊雲還有學生優惠,趕緊上車玩玩吧,搭建屬於獨立域名的私人部落格,
騰訊雲搭建自己的部落格系統
畢業論文寫完了,在記錄下自己的生活吧,騰訊的學生主機還有點時間,趁著還有學生特權,搭建一個自己的部落格玩玩。 使用的工具: 騰訊雲主機(centos 7.0) 域名(解析) Blog_mini 獲取Blog_mini原始碼 Blog_mini的原始碼在github上,
阿里雲和騰訊雲搭建hadoop
!注意:以阿里雲伺服器作為master 騰訊雲作為slave1 slave2時 修改 vim /etc/hosts 時 ,阿里雲內網IP master 騰訊雲外網ip slave1
騰訊雲搭建個人部落格
1、購買、配置騰訊雲伺服器 完成學生認證後,我們就可以開始了 最近騰訊雲又推出了新套餐,我之前買的限量搶購套餐,所以這裡用新套餐舉個例子吧 先進行購買前的簡單配置,基本都是預設好的,作業系統可以根據需要,自己選擇,域名的購買我們下一步再說。
【騰訊雲的1001種玩法】騰訊雲搭建DiscuzX論壇
騰訊雲搭建DiscuzX論壇,這裡的方法是從服務市場選擇OS映象,簡化了環境安裝配置。 從騰訊雲官網購買一臺雲伺服器,在購買嚮導.服務市場選擇映象:Apache PHP多版本可切換(CentOS6.5 64位) 並設定機器root賬號,密碼 從說明文件中檢視獲取賬號
騰訊雲 搭建Http靜態伺服器環境----centos 環境(二)
搭建靜態網站,首先需要部署環境。下面的步驟,將告訴大家如何在伺服器上通過 Nginx 部署 HTTP 靜態服務。安裝 Nginx在 CentOS 上,可直接使用 yum 來安裝 Nginxyum install nginx -y 安裝完成後,使用 nginx 命令啟動 Ngi
整理 騰訊雲搭建Python3、Django環境
安裝Python3Python全部版本下載地址: https://www.python.org/ftp/解決RedHat,使用Python3退格出現亂碼問題: yum -y install readline-devel.x86_64下載Python
臺服DNF騰訊雲搭建流程
自己開通的有騰訊雲的伺服器,剛好前段時間已經在虛擬機器裡把單機版的臺服dnf搭建完成,所以一直想搬到自己的雲伺服器上,可以供大家玩。不過我的雲伺服器配置太低,1核1G記憶體。。所以還是自己娛樂吧。自己鼓搗好久,看了不少帖子,整理下有這幾個帖子很有用: 頻道多開 獨立掉
阿里雲、華為雲和騰訊雲等多家物聯網平臺的異同
2017年6月份的時候曾寫過一篇微軟、百度和阿里三大公司的物聯網平臺文章《微軟百度阿里三大物聯網雲平臺探析》,當時中美貿易戰還沒有開始打,亞馬遜和微軟的雲平臺正如日中天,其物聯網平臺也已經初步佈局完畢,無論是平臺的完善度,還是技術的領先性,國內廠商都難以比肩。 國內各大物聯網平臺一覽 那個時候國內廠商,百
你畫我猜題目庫
之前在電腦上玩過線上的你畫我猜,感覺很有意思。正好我們部門迭代會之後都會玩個小遊戲,於是我組織了一個線下的你畫大家猜,效果還不錯。 由於線下不同線上的特點我對規則重新制定了一下,規則可以是靈活多變的,大家都認同玩的開心就好。 再下面就是遊戲的題目庫了,這些題目都是我收集的,看到這些
canvas+websocket+vue做一個你畫我猜小遊戲
做這個主要是學習使用一下canvas和websocket,專案地址。 你畫我猜大家應該都玩過,一個人畫,其他人猜。現在剛剛實現了最基本的功能,以後還會慢慢修改的。 完成進度 登入,登入後username儲存到了sessionStorage中。 座位,登入後
Java課程設計之你畫我猜
這幾天要做資料結構的課程設計,寫了幾天終於完成,雖然有很多不足之處,但勉強完成了。過後感覺從大一到現在寫過許多項 目,是該總結一下那些年的課程設計了。 大一做的課程設計是“你畫我猜”,那時候修修改改,前後用了一個月的時間,資料庫方面是凡神做的,最後的成績還不錯。下面總