本文链接：https://blog.csdn.net/weixin_44867717/article/details/104832378

个人中心-小智同学-认识socket.io

原生的 WebSocket 使用比较麻烦，所以推荐使用一个基于WebSocket封装好的解决方案（关于即时通讯的js等后端语言的插件）：socket.io 。

socket.io 提供了服务端 + 客户端的实现

客户端：浏览器
服务端：Java、Python、PHP、。。。。Node.js

官网：https://socket.io/

仓库：https://github.com/socketio/socket.io

个人中心-小智同学-体验socket.io

官网的DEOM：https://socket.io/get-started/chat/

服务端代码： app.js 创建连接

安装包：

npm i express socket.io

var app = require('express')();  //安装包
var http = require('http').createServer(app);  //自带模块
var io = require('socket.io')(http);  //安装包

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){

  socket.on('disconnect', function(){
    console.log('user disconnected');
  });

  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

http.listen(3000, '0.0.0.0', function(){
  console.log('listening on *:3000');
});

客户端代码： index.html

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <meta charset="utf-8" >                  
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <!-- 消息列表 -->
    <ul id="messages"></ul>

    <!-- 发送消息的表单 -->
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>

    <!-- SocketIO 提供了一个客户端实现：socket.io.js -->
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
      // 1.建立连接，得到 socket 通信对象
      var socket = io()
      // 2.监听连接是否开启
      socket.on('connect', () => {
        console.log('建立连接成功了')
      })
       //3.socket.emit 发消息
      $('form').submit(function(e){
        e.preventDefault();
        socket.emit('chat message', $('#m').val());
        $('#m').val('');
        return false;
      });
	// 4.socket.on 收消息  chat message名称前后端要一致
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    </script>
  </body>
</html>