面试题：网络编程之Node.js Socket基础应用

服务器端关键代码

安装依赖：
```
npm install socket.io
```

代码实现：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('A user connected');

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

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

const port = 3000;
server.listen(port, () => {
    console.log(`Server running on port ${port}`);
});

客户端关键代码

引入Socket.IO客户端库：在HTML页面中引入，假设已经下载并放置在合适路径：
```
<script src="/socket.io/socket.io.js"></script>
```

代码实现：

<!DOCTYPE html>
<html>

<head>
    <title>Socket.IO Chat</title>
</head>

<body>
    <ul id="messages"></ul>
    <form id="form" autocomplete="off">
        <input id="input" />
        <button>Send</button>
    </form>
    <script>
        const socket = io();

        const form = document.getElementById('form');
        const input = document.getElementById('input');
        const messages = document.getElementById('messages');

        form.addEventListener('submit', (e) => {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', (msg) => {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>
</body>

</html>

处理流程说明

用户连接：
- 服务器端通过io.on('connection', (socket) => {})监听新用户连接，当有新用户连接时，会执行回调函数内代码，这里打印用户连接信息。
- 客户端通过const socket = io();连接到服务器，一旦连接成功，就可以进行后续的消息交互。
消息发送：
- 客户端在表单提交事件中，通过socket.emit('chat message', input.value)将用户输入的消息发送到服务器，事件名为chat message，携带消息内容。
- 服务器端通过socket.on('chat message', (msg) => {})监听该事件，接收到消息后，通过io.emit('chat message', msg)将消息广播给所有连接的客户端。
消息接收：
- 客户端通过socket.on('chat message', (msg) => {})监听服务器广播的chat message事件，接收到消息后，在页面上展示消息内容。

面试题：网络编程之Node.js Socket基础应用

知识考点

面试题答案

服务器端关键代码

客户端关键代码

处理流程说明