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)