共计 1984 个字符，预计需要花费 5 分钟才能阅读完成。
为什么需要 WebSocket？
因为个人对概念理解不是很深，文字表达能力不强，如果有关 HTTP 等方面描述不准确，欢迎纠正，谢谢大家
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说：我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用“ 轮询 ”：设置定时器每隔一段时候，就发出一个 ” 询问 ”(简单理解为 ajax 请求)，了解服务器有没有新的信息。最典型的场景就是聊天室。
—- 参考了
阮一峰老师的文章：WebSocket 教程
轮询请求的缺点：
- 不停地链接，断开, 链接，断开请求，浪费很多服务器资源
- 浪费带宽
- 移动端浪费流量
websocket 的优点：
- 没有同源限制，客户端可以与任意服务器通信，不涉及到跨域的问题。
- 双向通信，服务器可以向客户端主动发送数据。
- 数据格式比较轻量，性能开销小，通信高效。
websocket 为什么高效
普通的 http 通信是基于字符的通信(超文本), websocket 一开始是文本协议, 但是链接建立后编程了二进制协议，数据无需转换等。socket.io 的使用
socket.io 是一个封装后的库，原生的 websocket 因为比较复杂，需要自己处理请求头，设置持续链接等等。因此选择使用的 socket.io
安装
npm i socket.io -D
socket 主要有两个方法：sock.emit('name', data) 主动发送数据sock.on('name', function(data){})` 接收数据
1. 服务端
// server.js
const http = require('http')
const io = require('socket.io')
let server = http.createServer((req, res)=>{})
server.listen(8080)
// 建立 ws websocket 简称 ws
let wsServer = io.listen(server);
wsServer.on('connection', sock=>{sock.on('aaa', function(a,b){ // name -> 'aaa' 要与前台的 name 保持一致
console.log(a)
console.log(b)
console.log(arguments)
}) // 'aaa' 事件名与前台的一致
setInterval(function(){sock.emit('bbb', '服务器发来的数据') // name -> 'bbb' 要与前台的 name 保持一致
}, 2000)
})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">
<script src='http://localhost:8080/socket.io/socket.io.js'></script>
<!--
其实你的本地目录并不存在 XXX/socket.io/socket.io.js 文件，当向后台发送请求后，socket 会判断 req.url, 做一个类似于下面的处理, 读取 socket-io.js：if(req.url == '/socket.io/socket.io.js'){fs.readFile('node_modules/socket.io-client/dist/socket-io.js')
}
当然我们也可以直接将 socket-io.js 复制出来，直接用 script 引用，但是如果 socket 更新后我们的代码可能不是最新版，会出现一些问题。因此不建议这样使用：<script src='./socket.io.js'></script>
-->
<script>
let sock = io.connect('ws://localhost:8080/') // 这里是 ws 协议，不是 http 协议
// sock.emit
// sock.on
sock.emit('aaa', 'maruihua', 5)
sock.on('bbb', data => console.log(data))
</script>
</head>
<body>
</body>
</html>上面的代码直接复制下来就能使用。怎么运行 nodejs 服务我就不再讲了啊。
怎么样，是不是特别简单
妈妈再也不用担心我的学习了~
正文完
发表至： javascript
2019-05-29
