node之socketio · 前端技術總結

## 一、介紹學習socket之前，我們先了解下網絡七層是哪七層，而socket又是位于哪？網絡七層： 1. 應用層 2. 表示層 3. 會話層 4. 傳輸層 5. 網絡層 6. 數據鏈路層 7. 物理層而socket位于應用層與傳輸層之間，簡寫SSL（Secure Sockets Layer 安全套接層），而其繼任者傳輸層安全（Transport Layer Security，TLS）是為網絡通信提供安全及數據完整性的一種安全協議。TLS與SSL在傳輸層對網絡連接進行加密。 ## 二、socket.io 下載地址：https://socket.io/ 1、服務端下載socket > npm install socket.io --save ![](https://box.kancloud.cn/9de8f98adb139d1227ceaaf5e2ee7615_636x120.jpg) 2、客戶端下載socket ![](https://box.kancloud.cn/3027f32a0787e9510fdf8df17fdf5e08_305x55.jpg) ## 三、服務端使用連接socket成功后，向客戶端發送news ![](https://box.kancloud.cn/61331e87eac902fac20437c0a52a9301_462x245.jpg) ~~~ var io = require('socket.io')(server); // 連接 io.on('connection', function (socket) { // 發送news socket.emit('news', { hello: 'world' }); // 監聽 socket.on('sub', function(name, age, gender) { console.log(name, age, gender); }); // 如果不知道參數的話，可以使用 socket.on('sub', function(...data) { console.log(data.join(' ')); }); }); ~~~ ![](https://box.kancloud.cn/94af7dd807cb742c3f8c8ee5d9847278_306x67.jpg) ## 四、客戶端使用 ~~~ <!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> </head> <body> <script src="./socketio.js"></script> <script> var socket = io('localhost:3000', {transports: ['websocket']}); // 監聽連接 socket.on('connect', function() { console.log('%c connect success.', 'color: #690'); }); // 監聽數據 socket.on('news', function(data) { console.log(data); }); </script> </body> </html> ~~~ 訪問 http://localhost:3000/html/test.html 返回結果 ![](https://box.kancloud.cn/a6f6dd92c27be025abf865e309e07635_180x46.jpg)