1. 什麼是WebSocket?
WebSocket是一種在單個TCP連接上進行全雙工通信的協議。
使得客戶端和服務器之間的數據交換變得更加簡單,允許服務端主動向客戶端推送數據。
在WebSocket API中,瀏覽器和服務器只需要完成一次握手,兩者之間就直接可以創建持久性的連接,並進行雙向數據傳輸。
2. 優點(參考維基)
WebSocket與HTTP對比圖
客戶端例子
const ws = new WebSocket('ws://localhost:8888');
ws.onopen = () => {
console.log('WebSocket onopen');
}
ws.onmessage = e => {
console.log('WebSocket onmessage');
console.log('WebSocket message received:', e);
console.log('WebSocket data received:', e.data);
}
ws.onclose = e => {
console.log("WebSocket onclose");
};
- WebSocket.onopen: 連接成功後調用
- WebSocket.onmessage: 當接收到服務器消息時調用
- WebSocket.onclose: 連接關閉後調用
服務端例子(koa)
const Koa = require('koa');
const WebSocket = require('ws');
const app = new Koa();
const ws = new WebSocket.Server({port: 8888});
ws.on('connection', ws => {
console.log('server connection');
ws.on('message', msg => {
console.log('server receive msg:', msg);
});
ws.send('Information from the server');
});
app.listen(3000);
運行結果
客戶端
服務端
名詞解釋
- 握手: 一般創建WebSocket鏈接, 需要通過瀏覽器發出請求,服務器做出迴應, 這個過程稱爲“握手”