過去我們想要實現乙個實時web應用通常會考慮採用ajax輪循或者是long polling技術，但是因為頻繁的建立http連線會帶來多餘的請求以及訊息精準性的問題，讓我們在實現實時web應用時頭疼不已。現在，html5提出了websocket協議來規範解決了這個問題。ajax輪詢
ajax輪詢非常簡單了，就是在客戶端設定乙個定時器，頻繁的去請求介面，看有沒有資料返回，但是這樣很明顯會有很多的多餘請求，導致伺服器壓力巨大。。
long polling
long polling技術，其實是在ajax輪詢的基礎上再做了一些優化，客戶端請求服務端看有沒有返回，如果暫時沒有，服務端會把請求短暫的掛起，當有資料的時候再把資料返回給客戶端，這時候客戶端再另起乙個請求，詢問伺服器。
為了保證連線的通道不斷，我們通常會設定乙個timeout，當過了這個timeout時還沒有資料，服務端會把掛起的服務關閉，返回空的資料，然後客戶端再進行請求。
這樣做雖然比ajax輪詢好很多，但是當訊息量大的時候，請求數還是很多。而且輪詢還極有可能在傳輸的過程中遇到訊息丟失的情況，這時候需要服務端做訊息快取等處理。
websocket協議本質上是乙個基於tcp的協議，它由通訊協議和程式設計api組成，websocket能夠在瀏覽器和伺服器之間建立雙向連線，以基於事件的方式，賦予瀏覽器實時通訊能力。既然是雙向通訊，就意味著伺服器端和客戶端可以同時傳送並響應請求，而不再像http的請求和響應。
簡單來說，websocket就是乙個長連線通道，在這個通道裡客戶端和服務端可以自由的傳送訊息給對方，而且不用管對方是否有返回，雙方都有關閉這個通道的權利。
websocket通訊場景
客戶端：啦啦啦，我要建立websocket協議，websocket協議版本：17（http request）
服務端：ok，確認，已建立websocket（http protocols switched）
客戶端：有訊息的時候記得推給我哦。
服務端：ok，有的時候會告訴你的。
服務端：balabalabalabala
服務端：balabalabalabala
服務端：哈哈哈哈哈啊哈哈哈哈
客戶端：哈哈哈哈哈哈哈，你可以不用返回
...使用websocket有什麼好處建立websocket連線
var ws = new websocket('ws:')**示例：
// 當websocket連線建立成功時
ws.onopen = function() ;
// 當收到服務端的訊息時
ws.onmessage = function(e) ;
// 當websocket關閉時
ws.onclose = function() ;
// 當出現錯誤時
ws.onerror = function() ;
**示例：
// 傳送訊息
ws.send('blablabla')
// 關閉socket
ws.close()
html5提供的socketapi太過於簡陋，並不能滿足複雜環境的socket互動需要，api的呼叫也不太方便。
定義乙個什麼樣的socket元件
socket元件示例
首先要和服務端約定互相可以識別的通訊協議，假設我們約定的通訊協議是
// 客戶端傳送給服務端 }
// 服務端返回給客戶端
, success: true,
errorcode: 0,
request: {} // 如果是服務端主動推訊息給客戶端，request會帶有method引數
// 如果是服務端返回客戶端請求，request就是客戶端之前請求的資料
}
/** @example
* var ws = new socket('ws:')
* ws.on('ready',function() );
* ws.emit("send", )
* })
* ws.on("error",function())
* ws.on("close",function())
*/function socket(url)
socket.prototype = ,
initsocket: function(url) ,
initlisteners: function()
return this
},bindsocketevent: function()
me.socket.onerror = function(e)
me.socket.onmessage = function(e)
return this
},reconnect: function() ,
isoffline: function() ,
on: function(evt, fn)
}else
return this
},off: function(evt, fn)
}return this
},emit: function(method, info) ))
return this
},trigger: function(evt) {
var me = this
if(me.listeners[evt]) {
for(var i=0; i介紹一下元件裡的心跳包機制：
因為一些原因，有這麼一種情況，socket還在客戶端連著，但是服務端和客戶端之間卻沒有辦法互相傳送訊息，我們稱這種現象叫做websocket失活。
元件裡採用的解決辦法是，客戶端每5秒鐘向服務端傳送心跳包，講道理服務端會返回乙個心跳包以保活。但是如果客戶端檢查1分鐘內沒有收到服務端的返回，客戶端會自動重連websocket。
websocket在建立連線之前，會先發乙個http協議詢問服務端要不要建立websocket，因為http請求是會帶上cookie的，這時候如果網域名稱下的cookie太多，有可能會導致websocket建立連線失敗。。
我這裡的解決方案是，更換介面的網域名稱位址，利用websocket可以跨域的特性繞過當前域的cookie建立連線。
原文:
WebIM技術 編寫前端WebSocket元件
過去我們想要實現乙個實時web應用通常會考慮採用ajax輪循或者是long polling技術，但是因為頻繁的建立http連線會帶來多餘的請求以及訊息精準性的問題，讓我們在實現實時web應用時頭疼不已。現在，html5提出了websocket協議來規範解決了這個問題。ajax輪詢 ajax輪詢非常簡...
現代前端技術解析 Web 前端技術基礎
對 dom 操作進行封裝 dom 文件物件模型 指 html 內容通過瀏覽器解析後建立的具有節點父子關係的樹形物件 模組化 元件化 非同步載入 保證盡快展示頁面 webp 格式的 更高壓縮比 瀏覽器快取檔案 304 狀態碼 客戶端傳送了乙個帶條件的 get 請求且該請求已被允許，而文件的內容並沒有改...
前端技術概覽
本文描述當前主流的前端框架，語言及技術棧。瀏覽器中的頁面叫web頁面，由於直接面向使用者，所以稱前端，由html css js組合而來，其中 html 是用來描述當前這個頁面的結構，css 用來描述頁面的樣子，js 通常是用來處理這個頁面和使用者的互動。頁面的骨架。為了復用一些樣式，有了css的id...