為什么需要 WebSocket？
初次接觸 WebSocket 的人显蝌，都會問同樣的問題：我們已經(jīng)有了 HTTP 協(xié)議殴胧，為什么還需要另一個協(xié)議？它能帶來什么好處挑宠？
答案很簡單，因為 HTTP 協(xié)議有一個缺陷：通信只能由客戶端發(fā)起颓影。
舉例來說各淀，我們想了解今天的天氣，只能是客戶端向服務(wù)器發(fā)出請求诡挂，服務(wù)器返回查詢結(jié)果碎浇。HTTP 協(xié)議做不到服務(wù)器主動向客戶端推送信息。
這種單向請求的特點(diǎn)璃俗，注定了如果服務(wù)器有連續(xù)的狀態(tài)變化奴璃，客戶端要獲知就非常麻煩。我們只能使用["輪詢"]每隔一段時候城豁，就發(fā)出一個詢問苟穆，了解服務(wù)器有沒有新的信息。最典型的場景就是聊天室唱星。
輪詢的效率低雳旅，非常浪費(fèi)資源（因為必須不停連接，或者 HTTP 連接始終打開）间聊。因此攒盈，工程師們一直在思考，有沒有更好的方法甸饱。WebSocket 就是這樣發(fā)明的沦童。
前端使用WebSocket的API
## WebSocket 屬性
readyState屬性返回實例對象的當(dāng)前狀態(tài)仑濒，共有四種。
0 CONNECTING 表示正在連接
1 OPEN 表示連接成功偷遗，可以通信了
2 CLOSING 表示連接正在關(guān)閉
3 CLOSED 表示連接已經(jīng)關(guān)閉墩瞳，或者打開連接失敗
回調(diào)函數(shù)
socket.onopen=function(){
console.log('建立連接');
socket.send('連接上了'); //發(fā)送會話
socket.close();
}
socket.onmessage=function(event){
var data = event.data;
console.log('接收會話');
}
socket.onerror=function(event){
console.log('打印錯誤',event);
}
socket.onclose=function(event){
console.log('關(guān)閉連接');
}
以上回調(diào)函數(shù)也可以用事件監(jiān)聽處理函數(shù)來調(diào)用,例如:
socket.addEventListener('message',function(event){
console.log(event.data);//do something
})
前端整體代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>首頁</p>
</body>
</html>
<script>
var newWeb = function () {
var url = "ws://10.20.23.115:8098/echo"
console.log(url);
var ws = new WebSocket(url);
ws.onopen = function () {
ws.send('老子終于連上了');
}
ws.onmessage = function (evt) {
console.log(evt.data);
ws.close();
};
ws.onclose = function (evt) {
console.log("WebSocketClosed!");
};
ws.onerror = function (evt) {
console.log('WebSocketError!');
};
}
newWeb();
</script>
后端對websocket的處理
目前我是用node進(jìn)行配置
下載插件
npm install express-ws
由于我用的是express框架,所以我用的是express-ws這個中間件,其他中間件的用法幾乎都是大同小異
var app = express();
var expressWs = require('express-ws')(app);
app.ws('/echo', function(ws, req) {
ws.on('message', function(msg) {
ws.send('進(jìn)來了');
});
});
這里是直接寫在入口文件app.js中的,那么這里要值得注意的是要放在注冊路由前面
如果放在路由后面就會沒有效果,那么如果要在路由系統(tǒng)中使用也是可有的,注冊方式需要改變一下,在index.js路由文件里
var expressWs = require('express-ws')(router);
router.ws('/echo', function(ws, req) {
ws.on('message', function(msg) {
ws.send('進(jìn)來了');
});
});
不過在app.js中也需要注冊一下app,例如 var expressWs = require('express-ws')(app);
啟動程序如圖
簡單的websocket實例算是跑通了,
