本文链接：https://blog.csdn.net/yunchong_zhao/article/details/107538788

在讲解socket.io 先说下html5中新增的 webscoket 协议。
websocket的原生使用就不细说了

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

而socket.io 就是基于 websocket 协议进行开发的
https://socket.io/docs // 它的官网
2. Socket.IO 实现了实时双向的基于事件的通讯机制。旨在让各种浏览器与移动设备上实现实时app功能，模糊化各种传输机制。

Socket.IO 是跨平台，多种连接方式自动切换，做即时通讯方面的开发很方便，而且能和expressjs提供的传统请求方式很好的结合，即可以在同一个域名，同一个端口提供两种连接方式
提前安装好 socket.io npm install socket.io --save
好了下面让我们开始使用在node.js的环境下进行使用
index.js

const content = require('fs').readFileSync(__dirname + '/index.html', 'utf8');

const httpServer = require('http').createServer((req, res) => {
  // serve the index.html file
  res.setHeader('Content-Type', 'text/html');
  res.setHeader('Content-Length', Buffer.byteLength(content));
  res.end(content);
});

const io = require('socket.io')(httpServer);

io.on('connect', socket => {
  console.log('connect');
});

httpServer.listen(3000, () => {
  console.log('go to http://localhost:3000');
});

然后创建一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Minimal working example</title>
</head>
<body>
    <ul id="events"></ul>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const $events = document.getElementById('events');

        const newItem = (content) => {
          const item = document.createElement('li');
          item.innerText = content;
          return item;
        };

        const socket = io();

        socket.on('connect', () => {
          $events.appendChild(newItem('connect'));
        });
    </script>
</body>
</html>

启动我们的node.js 服务器查看一下效果
在这里插入图片描述

r然后这样算是启动成功了那么我们开始给客户端发送消息
index.js

io.on('connect', socket => {
  console.log('connect');
  let counter = 0;
    setInterval(() => {
      socket.emit('hello', ++counter);  // 触发 hello
    }, 1000);
});

index.html

socket.on('hello', (counter) => {   // 监听 hello
  $events.appendChild(newItem(`hello - ${counter}`));
});

再启动咱的服务器进行查看下
在这里插入图片描述
这样是不是就可以通过服务器不停的给客户端进行发送信息而不是通过前端通过定时器不停的发送 ajax的那种方式进行轮询了
关注我持续更新前端知识

scoket.io在 node.js中的使用