示例代码请访问我的 GitHub: https://github.com/chencl1986/nodejs-tutorial
webSocket 的优势
性能高.
根据测试环境数据的不同, 大约会比普通 Ajax 请求高 2-10 倍. HTTP 是文本协议, 数据量比较大.
而 WebSocket 是基于二进制的协议, 在建立连接时用的虽然是文本数据, 但之后传输的都是二进制数据, 因此性能比 Ajax 请求高.
双向通信.
如果是普通 Ajax 请求, 需要实时获取数据, 只能用计时器定时发送请求, 这样会浪费服务器资源和流量.
而通过 WebSocket, 服务器可以主动向前端发送信息.
安全性高
由于 WebSocket 出现较晚, 相比 HTTP 协议, 在安全性上考虑的更加充分.
接下来, 尝试用 Socket.io 建立一个基于 WebSocket 的双向通信.
Socket.io
Socket.io 是在使用 WebSocket 时的一个常用库, 它会自动判断在支持 WebSocket 的浏览器中使用 WebSocket, 在其他浏览器中, 会使用如 flash 等方式完成通信.
操作简单
兼容低端浏览器, 如 IE6
自动进行数据解析
自动重连 若出现连接断开的情况, WebSocket 会进行自动重连.
使用 Socket.io 建立一个 WebSocket 应用
服务端示例代码:/lesson19/server.JS
- const http = require('http')
- const io = require('socket.io')
- // 1. 建立 HTTP 服务器.
- const server = http.createServer((req, res) => {
- })
- server.listen(8080)
- // 2. 建立 WebSocket, 让 socket.io 监听 HTTP 服务器, 一旦发现是 WebSocket 请求, 则会自动进行处理.
- const ws = io.listen(server)
- // 建立连接完成后, 触发 connection 事件.
- // 该事件会返回一个 socket 对象 (https://socket.io/docs/server-api/#Socket), 可以利用 socket 对象进行发送, 接收数据操作.
- ws.on('connection', (socket) => {
- // 根据事件名, 向客户端发送数据, 数据数量不限.
- socket.emit('msg', '服务端向客户端发送数据第一条', '服务端向客户端发送数据第二条')
- // 根据事件名接收客户端返回的数据
- socket.on('msg', (...msgs) => {
- console.log(msgs)
- })
- // 使用计时器向客户端发送数据
- setInterval(() => {
- socket.emit('timer', new Date().getTime())
- }, 500);
- })
客户端示例代码:/lesson19/index.html
- <!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>
- <!-- 引用 Socket.io 的客户端 js 文件, 由于 Socket.io 已在服务端监听了 HTTP 服务器的请求, 一旦收到对该文件的请求,
- 则会自动返回该文件, 不需要开发人员配置. -->
- <!-- 该文件在服务端的位置为 / node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
- -->
- <script src="http://localhost:8080/socket.io/socket.io.js">
- </script>
- <script>
- // 与服务器建立 WebSocket 连接, 该连接为 ws 协议, socket.io 不需要担心跨域问题.
- const socket = io.connect('ws://localhost:8080/')
- // 根据事件名, 向服务端发送数据, 数据数量不限.
- socket.emit('msg', '客户端向服务端发送数据第一条', '客户端向服务端发送数据第二条')
- // 根据事件名接收服务端返回的数据
- socket.on('msg', (...msgs) = >{
- console.log(msgs)
- })
- // 接收服务端通过计时器发送来的数据
- socket.on('timer', (time) = >{
- console.log(time)
- })
- </script>
- </body>
- </HTML>
用浏览器打开 index.HTML, 即可在控制台看到打印的消息.
来源: https://juejin.im/post/5c866a415188257e1916b96d