websocket 的应用 socket.io

一，方法
① on 监听事件
② emit 触发事件

node代码 express框架的

		var app = require("express")();
	
		var server = require("http").Server(app);
	
		var io = require("socket.io")(server);
	
		server.listen(80);
	
		// WARNING: app.listen(80) will NOT work here!
	
		// 静态文件
	
		app.use(require("express").static("public"));
	
		app.get("/", function(req, res) {
	
		  // res.sendFile(__dirname + "/index.html");
	
		  res.redirect("/index.html");
	
		});
	
		let alls = [];
	
		let username;
	
		io.on("connection", function(socket) {
	
		  // 登录 操作
	
		  socket.on("login", res => {
	
		    username = res; //设置 用户名
	
		    alls.push(res);
	
		    socket.emit("tologin", alls);
	
		    io.emit("all", username + "登录");
	
		  });
	
		  // 监听用户发送过来的 消息 进行广播
	
		  socket.on("message", res => {
	
		    console.log(res);
	
		    io.emit("all", res);
	
		  });
	
		  // 用户离开操作
	
		  socket.on("disconnect", function() {
	
		    io.emit("userto", "用户离开了");
	
		    let a = alls.findIndex(x => {
	
		      x = username;
	
		    });
	
		    alls.splice(a, 1);
	
		  });
	
		});

html 代码注意这个html代码在express 静态资源目录 public 目录下

		<!DOCTYPE html>
	
		<html lang="en">
	
		<head>
	
		  <meta charset="UTF-8">
	
		  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	
		  <title>Document</title>
	
		</head>
	
		<body>
	
		  <!-- // 登录  -->
	
		  <div class="box1" style="display: block;">
	
		    <input type="text" id="username">
	
		    <button id="xiuname">设置名称</button>
	
		  </div>
	
		  <!-- 聊天 -->
	
		  <div class="box2" style="display: none;">
	
		    <ul id="ul">
	
		    </ul>
	
		    <div id="ids"></div>
	
		    <input type="text" id="in">
	
		    <button>发送消息</button>
	
		  </div>
	
		  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
	
		  <script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
	
		  <script>
	
		    var socket = io.connect('http://localhost');
	
		    $('#xiuname').on('click', () => {
	
		      let usernmae = $('#username').val()
	
		      if (!usernmae) return;
	
		      // 发送服务器
	
		      socket.emit('login', usernmae)
	
		    })
	
		    // 监听 登录成功
	
		    socket.on('tologin', (res) => {
	
		      $('.box1').css({ 'display': 'none' });
	
		      $('.box2').css({ 'display': 'block' });
	
		      console.log(res);
	
		      res.forEach(item => {
	
		        $('#ul').append(`
	
		        <li>${item}用户</li>
	
		      `)
	
		      });
	
		      $('#ids').html(`
	
		      <div>${res}登录了<div>
	
		      `)
	
		    })
	
		    // 发送消息
	
		    $('button').on('click', () => {
	
		      let row = $('#in').val()
	
		      // console.log(row);
	
		      socket.emit('message', row)
	
		    })
	
		    // 接收消息
	
		    socket.on('all', (res) => {
	
		      $('#ids').append(`
	
		      <div>${res}---消息<div>
	
		      `)
	
		    })
	
		  </script>
	
		</body>
	
		</html>