col-6
col-4
col-2
資訊專欄INFORMATION COLUMN
摘要：演示地址實(shí)時(shí)畫板聊天室你畫我猜聊天室圖片搶先看解釋關(guān)于是基于實(shí)現(xiàn)的套接字前端后端數(shù)據(jù)交互的庫(kù)，通過它的封裝，使用者可以很方便的開發(fā)，而且支持長(zhǎng)輪詢等方法，兼容低版本瀏覽器。最后推薦一個(gè)實(shí)時(shí)的更加優(yōu)秀的游戲。
前言
一直都想好好的學(xué)習(xí)運(yùn)用node，一直都不知道要做什么東西，最近Java Web老師要求做個(gè)前端的應(yīng)用，既然是前端應(yīng)用，那肯定得是單頁應(yīng)用了，而且node很適用于高并發(fā)的實(shí)時(shí)應(yīng)用，所以便選擇node以及基于node的socket.io。
演示地址實(shí)時(shí)畫板+聊天室（GitHub）
你畫我猜+聊天室（Demo | GitHub）
圖片搶先看
Socket.IO 是基于node實(shí)現(xiàn)的套接字前端后端數(shù)據(jù)交互的庫(kù)，通過它的封裝，使用者可以很方便的開發(fā)，而且支持websocket/ajax 長(zhǎng)輪詢等方法，兼容低版本瀏覽器。
基本使用如下：
服務(wù)器端
var httpd = require("http").createServer(handler);
var io = require("socket.io").listen(httpd);
function handler(req,res) {
}
io.sockets.on("connection",function(socket){
//新的客戶端連接
socket.on("login",(name,age)=>{
socket.emit("message",name+","+age);//觸發(fā)客戶端message事件
})
});
客戶端
引入js文件
進(jìn)行交互
var socket = io.connect(); //觸發(fā)服務(wù)器端connection事件
socket.emit("login","moyu",20); //觸發(fā)服務(wù)器端login事件
socket.on("message",function(msg){
alert(msg);
})
關(guān)于排行榜
利用了js的匿名立即執(zhí)行函數(shù)進(jìn)行模塊化包裝
var tops = (function () {
/*
* _tops : 存放所有id,按照回答正確數(shù)倒序排列
* idmap : 一個(gè)hash map結(jié)構(gòu)，key為id，value為名字與回答正確數(shù)
* n : 前n個(gè)，在toJSON調(diào)用
*/
var _tops = [],idmap={},n=10;
return {
set : function (id,name,v) {
if(this.isExists(id))//如果id已經(jīng)存在則刪除，防止出現(xiàn)重復(fù)id
this.remove(id);
// 找到按照v從大到小所對(duì)應(yīng)的位置
var i = _tops.findIndex(x=>{return idmap[x].v{
if(i>=n) return false;
arr.push({id:x,v:idmap[x].v,name:idmap[x].name});
return true;
});
return arr;
}
}
}());
關(guān)于Bootstrap柵格
.container{
margin-right: auto;
margin-left: auto;
//防止最外層的.row元素左右擴(kuò)展15px
padding-left: 15px;
padding-right: 15px;
}
.col-3{
width: 30%;
}
.col-4{
width: 40%;
}
.col-9{
width: 90%;
}
/.../
.row{
/* 向外左右延伸15px */
margin-right: -15px;
margin-left: -15px;
}
/* 防止子元素為float,父元素的高度為0 */
.row:before,
.row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9{
padding-left: 15px;
padding-right: 15px;
float:left;
}
HTML結(jié)構(gòu)
關(guān)于一欄（多欄）寬度固定，一欄自適應(yīng)col-6
col-4col-2
圣杯布局
雙飛翼
感受...做單頁應(yīng)用真的需要挺大的心臟，而且需要較好的整體的架構(gòu)，好在socket.io對(duì)websocket封裝的不錯(cuò)，變成了面向消息的方式，代碼結(jié)構(gòu)相對(duì)更加清晰了些。
...不敢想象用Java做這種實(shí)時(shí)單頁應(yīng)用后端會(huì)有多么的「拗口」。最后推薦一個(gè)實(shí)時(shí)的更加優(yōu)秀的游戲：slithe。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/86362.html
摘要：聊一聊端的即時(shí)通訊端實(shí)現(xiàn)即時(shí)通訊的方法有哪些短輪詢長(zhǎng)輪詢流輪詢客戶端定時(shí)向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返回響應(yīng)信息并關(guān)閉連接。介紹是開始提供的一種在單個(gè)連接上進(jìn)行全雙工通訊的協(xié)議。 聊一聊Web端的即時(shí)通訊 Web端實(shí)現(xiàn)即時(shí)通訊的方法有哪些? - 短輪詢 長(zhǎng)輪詢 iframe流 Flash Socket 輪詢 客戶端定時(shí)向服務(wù)器發(fā)送Ajax請(qǐng)求，服務(wù)器接到請(qǐng)求后馬上返...
摘要：使用即可完成一個(gè)很有意思的在線游戲作品。你畫我猜，相信大家對(duì)這個(gè)游戲都很熟悉。我用實(shí)現(xiàn)了你畫我猜這個(gè)游戲?？梢孕薷漠嫻P顏色，粗細(xì)，進(jìn)行撤銷，恢復(fù)，清空等操作。第一個(gè)猜完后，游戲時(shí)間縮短為秒。 使用 websocket + vue2 即可完成一個(gè)很有意思的在線游戲作品。你畫我猜，相信大家對(duì)這個(gè)游戲都很熟悉。 我用Vue2 + mint-ui + nodejs + websocket ...
摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺(tái)用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的 選擇技術(shù)類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺(tái)用php寫，websocket使用選workman來做。 這里使用Taro做畫布是有問題的，它不支持h5。 選型的問題 taro 不支持畫布的H5...
摘要：選擇技術(shù)類型微信小程序使用功能不多就不是使用了后臺(tái)用寫，使用選來做。這里使用做畫布是有問題的，它不支持。游戲同步問題，這里用狀態(tài)同步的方法。最后使用的還是挺爽的 選擇技術(shù)類型 微信小程序使用Taro（功能不多就不是使用Redux了）,后臺(tái)用php寫，websocket使用選workman來做。 這里使用Taro做畫布是有問題的，它不支持h5。 選型的問題 taro 不支持畫布的H5...
閱讀 2607·2021-10-14 09:43
閱讀 3566·2021-10-13 09:39
閱讀 3299·2019-08-30 15:44
閱讀 3149·2019-08-29 16:37
閱讀 3714·2019-08-29 13:17
閱讀 2740·2019-08-26 13:57
閱讀 1832·2019-08-26 11:59
閱讀 1253·2019-08-26 11:46
