在 HTML5 之前，Web 在设计上并没有考虑到动态和实时通信等高级特性，早期的网页基本上只是用来显示单一的、静态的文档。HTTP 协议的无状态和无连接特性也决定了早期的 Web 页面不能轻易地实现浏览器与服务器的双向实时通信功能。

Ajax是Web的一个重大进展，从此网页支持局部渲染，人们再也不需要忍受即使更新一点内容也需要刷新整个页面的糟糕体验了。

但是，随着时间的推移和技术的发展，人们想要在 Web 上做的事越来越多。仅仅依靠 Ajax 不能轻易地实现服务器推送、双向实时通信等功能，Socket 就是为了解决这些问题的。socket 协议本身比较复杂，这里我们仅讨论一个对 socket 协议进行封装的库——socket.io的使用。

服务端配置

1. 安装依赖

yarn add sopcket.io

2. 编写 app.js

const http = require('http')

const port = 3000
const server = http.createServer().listen(port)
const io = require('socket.io')(server)

io.on('connection', client => {
  console.log(client)
  client.on('event', data => {console.log('在线') });
  client.on('disconnect', () => { console.log('离线') });
})

客户端配置

1. 新建一个 html 文档
2. 下载 socket.io.js 脚本

   yarn add socket.io-client

然后在 node_modules/socket.io-client/dist 目录下可以找到 socket.io.js 文件

3.在 html 文档中插入以下代码段

<script src="socket.io.js"></script>
<script>
var socket = io('http://localhost:3000');
socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
});
</script>

结果

浏览器访问本地服务器，如果出现一下输出则说明 socket 连接创建成功，更多高级用法请看 socket.io 的官方文档。

参考链接

1. 菜鸟学习nodejs--Socket.IO即时通讯
2. Socket.io Document