為什么需要 WebSocket？
初次接觸 WebSocket 的人，都會(huì)問同樣的問題：我們已經(jīng)有了 HTTP 協(xié)議，為什么還需要另一個(gè)協(xié)議？它能帶來什么好處？
答案很簡(jiǎn)單，因?yàn)?HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶端發(fā)起。
舉例來說，我們想了解今天的天氣，只能是客戶端向服務(wù)器發(fā)出請(qǐng)求，服務(wù)器返回查詢結(jié)果。HTTP 協(xié)議做不到服務(wù)器主動(dòng)向客戶端推送信息。
這種單向請(qǐng)求的特點(diǎn)，注定了如果服務(wù)器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用["輪詢"]每隔一段時(shí)候，就發(fā)出一個(gè)詢問，了解服務(wù)器有沒有新的信息。最典型的場(chǎng)景就是聊天室。
輪詢的效率低，非常浪費(fèi)資源（因?yàn)楸仨毑煌＿B接，或者 HTTP 連接始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發(fā)明的。
前端使用WebSocket的API
## WebSocket 屬性
readyState屬性返回實(shí)例對(duì)象的當(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ā)送會(huì)話
socket.close();
}
socket.onmessage=function(event){
var data = event.data;
console.log('接收會(huì)話');
}
socket.onerror=function(event){
console.log('打印錯(cuò)誤',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>
后端對(duì)websocket的處理
目前我是用node進(jìn)行配置
下載插件
npm install express-ws
由于我用的是express框架,所以我用的是express-ws這個(gè)中間件,其他中間件的用法幾乎都是大同小異
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中的,那么這里要值得注意的是要放在注冊(cè)路由前面
如果放在路由后面就會(huì)沒有效果,那么如果要在路由系統(tǒng)中使用也是可有的,注冊(cè)方式需要改變一下,在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中也需要注冊(cè)一下app,例如 var expressWs = require('express-ws')(app);
啟動(dòng)程序如圖
簡(jiǎn)單的websocket實(shí)例算是跑通了,
