使用 socket.io 创建一个简单的聊天应用

创建一个目录 easy-chat-application。

在目录下执行命令 npm init -y。

然后下载 express 和 socket.io。

shell

npm install express@4

npm install socket.io

index.js

const express = require('express');
const app = express();
const http = require('http');
// 固定写法
const server = http.createServer(app);
// 固定写法
const { Server } = require("socket.io");
// 固定写法
const io = new Server(server);

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

io.on('connection', (socket) => {
  console.log('a user connected');
  // 监听来自客户端的 chat all 事件
  socket.on('chat all', (msg) => {
    // 向所有客户端发送消息
    io.emit('chat all', msg);
  });
  // 监听来自客户端的 chat no name 事件
  socket.on('chat no name', (msg) => {
    // 向所有客户端发送消息，除了触发该 socket 的客户端
    socket.broadcast.emit('chat no name', msg);
  });

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

index.html

html

<!DOCTYPE html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      body { margin: 0; padding-bottom: 3rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

      #form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
      #input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
      #input:focus { outline: none; }
      #form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }

      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages > li { padding: 0.5rem 1rem; }
      #messages > li:nth-child(odd) { background: #efefef; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send All</button>
    </form>
    <button id="noName">匿名发送</button>
  </body>
  <!-- 
    <script src="/socket.io/socket.io.js"></script>为什么可以通过根路径引入 socket.io.js 呢 
    这是因为在 Node.js 中使用 Socket.io 库时，
    它会在服务器启动时自动为客户端提供一个专门的 /socket.io/socket.io.js 路径，
    以便客户端可以引用并连接到服务器上运行的 Socket.io 实例。

    这个路径是通过服务器对象的 listen() 方法中的 serveClient 选项来启用的，
    如果启用了该选项，
    Socket.io 会在服务器上为客户端提供此路径。

    因此，客户端可以通过在 HTML 页面中包含 <script src="/socket.io/socket.io.js"></script> 来获取客户端的 Socket.io 库文件，
    而不需要知道其实际的物理路径。

    这使得客户端可以轻松地与服务器建立连接并进行双向通信。 
  -->
  <script src="/socket.io/socket.io.js"></script>
  <script>
    var socket = io();
    var form = document.getElementById('form');
    var input = document.getElementById('input');
    var noNameButton = document.getElementById("noName")

    noNameButton.addEventListener('click', function(e) {
      if (input.value) {
        socket.emit('chat no name', input.value);
        input.value = '';
      }
    })

    form.addEventListener('submit', function(e) {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat all', input.value);
        input.value = '';
      }
    });
    // 客户端监听来自服务端的 chat all 事件
    socket.on('chat all', function(msg) {
      var item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
    // 客户端监听来自服务端的 chat no name 事件
    socket.on('chat no name', function(msg) {
      var item = document.createElement('li');
      item.textContent = msg;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight);
    });
  </script>
</html>

之后在浏览器中打开多个 localhost:3000 窗口，就可以测试 socket 通信了。

有广播所有人的事件，也有广播除发送人外所有人的事件。

在这里插入图片描述

使用 socket.io 创建一个简单的聊天应用 ​

使用 socket.io 创建一个简单的聊天应用