首先：
需要在服務器端安裝node.js，然后安裝express，socket.io這兩個模塊，並配置好相關的環境變量等。
其次：
服務端代碼如下：
var app = require('express')(); var server = require('http').Server(app); var io = require('socket.io')(server); server.listen(3031); io.on('connection', function (socket) { console.log('websocket has connected'); socket.emit('message', { static: 0 }); socket.on('num', function (data) { console.log(data.num); io.sockets.emit('last', { result: data.num }); }); });
前端代碼1如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="socket.io.js"></script> <script src="jquery.min.js"></script> </head> <body> <div class="result">1</div> <div class="addOne">加1</div> <script> var socket = io.connect('http://localhost:3031'); socket.on('message', function (data) { console.log(data); }); var result = 0; $('.addOne').click(function () { result += 1; $('.result').html(result); socket.emit('num', { num: result }) }); </script> </body> </html>
前端代碼2如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="socket.io.js"></script> <script src="jquery.min.js"></script> </head> <body> <div class="result">加1</div> <script> var socket = io.connect('http://localhost:3031'); socket.on('message', function (data) { console.log(data); }); socket.on('last', function (data) { console.log(data); $('.result').html(data.result); }); </script> </body> </html>
小結：通過以上代碼，我們可以實現類似於聊天的功能，或者長連接功能。
注意，及時通訊的功能，不同於普通的請求，相應。而是一直保持通訊中，前端發送，后端接收，后端然后再發送，前端再相應，這樣保持着一直的連接。