背景簡介
以前開發HTTP伺服器更多使用的是python語言中的Flask框架來完成，但是在最近的業務中涉及到在web頁面中實時獲取訊息更新，這個時候我能想到的解決方案
1.寫一個迴圈ajax請求，不斷請求後臺伺服器然後更新資料
2.藉助websocket協議從服務端推送新資料到web端
3.socketio
考慮到輪詢ajax的偽實時和頻寬成本，以及websocket的相容性後，決定採取方案3 socketio。
socketio這個協議本身和node配合會非常好，所以決定學習一下node應用的編寫，當然Flask本身也有第三方中介軟體flask-socketio對應的實現
編寫node應用一般使用web framework是以下兩個
1.express
2.koa
Express
express相對來說比較簡單一點，如你所想，第一個例程通常都是由Hello world開始
萬能的Hello world
開始之前記得安裝express
npm i express
以下例程來自socketio官方上
index.js檔案內容如下
var express = require('express');
var http = require('http')
var socketio = require('socket.io')
var app = express();
var server = http.Server(app);
var io = socketio(server);
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
// 註冊新連線到來的回撥函式
io.on('connection', (socket) => {
console.log('one connect comming');
});
server.listen(3000, () => {
console.log('listening on *:3000');
});
index.html檔案內容如下
<!doctype html>
<html>
<head>
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Socket.IO chat</title>
<style></style>
</head>
<body>
<form action="">
<input id="msg" autocomplete="off" /><button>Send</button>
</form>
<ul id="messages"></ul>
</body>
<script>
var socket = io();
</script>
</html>
編寫完成之後呼叫node index.js執行伺服器，用瀏覽器訪問一下localhost:3000看看效果，如果程式正常應該在控制檯和瀏覽器端可以看到效果
終端輸出
瀏覽器端
訊息同步功能實現（簡易的聊天室）
如果需要實現在多個瀏覽器上同步訊息，實現原理為由客戶端向服務端傳送訊息，然後再由服務端向客戶端推送訊息，示意圖如下
通訊原理圖
要完成上圖的效果，我們首先需要實現客戶端向node服務傳送聊天事件，編寫index.html，將其中的script標籤內的指令碼修改如下程式碼如下
<script>
// 新建立一個socketio client;
var socket = io();
// 註冊chat事件回撥函式
socket.on('chat', function(msg){
$('#messages').append($('<li>').text(msg)); // 每接收到一條chat事件, 我們就在dom上插入一條文字
});
$('form').submit(function(e){
e.preventDefault();
socket.emit('chat', $('#msg').val()); // 向服務端傳送chat事件
$('#msg').val('');
return false;
});
</script>
然後我們需要實現的是服務向其它客戶端推送chat事件，
呼叫on方法即可註冊回撥函式, 其中第一個引數'connection'為事件名稱, 第二個引數為回撥函式，將index.js程式碼修改成下圖
// 註冊新連線到來的回撥函式
io.on('connection', (socket) => {
socket.on('chat', (msg) => {
//io.emit用來向所有已經建立連線的socket傳送事件
io.emit('chat', msg);
});
});
效果動態圖，我這邊是使用4個瀏覽器容器來模擬多人同步的場景