Nodejs websocket 文件上传与实时滚动条实现

Nodejs websocket 文件上传与实时滚动条实现

Html5 + js + nodejs 文件上传 实时滚动条 有谁，不用socket,io如何做啊

6 回复

当然可以。下面是一个使用 Node.js 和 WebSocket 实现文件上传及实时滚动条的例子。我们将使用 ws 库来处理 WebSocket 连接，并使用 express 来搭建服务器。

安装依赖

首先，确保安装了必要的库：

npm install express ws multer

服务器端代码

const express = require('express');
const http = require('http');
const { Server } = require('ws');
const multer = require('multer');

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

// 设置静态文件目录
app.use(express.static('public'));

// 配置 Multer 处理文件上传
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
});

const upload = multer({ storage: storage });

// 创建 WebSocket 服务器
const wss = new Server({ server });

wss.on('connection', (ws) => {
  console.log('Client connected');

  ws.on('message', (message) => {
    console.log(`Received message: ${message}`);
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

// 文件上传路由
app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  console.log(`Uploaded file: ${file.originalname}`);

  // 广播文件上传信息给所有客户端
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({ type: 'file-uploaded', name: file.originalname }));
    }
  });

  res.status(200).send('File uploaded successfully');
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端代码

客户端需要一个简单的 HTML 页面和 JavaScript 脚本来处理文件上传和实时滚动条。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebSocket File Upload</title>
  <style>
    #scrollArea {
      width: 300px;
      height: 200px;
      overflow-y: scroll;
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <input type="file" id="fileInput">
  <button onclick="uploadFile()">Upload</button>
  <div id="scrollArea"></div>

  <script>
    const socket = new WebSocket('ws://localhost:3000');

    socket.onopen = () => {
      console.log('Connected to server');
    };

    socket.onmessage = (event) => {
      const data = JSON.parse(event.data);
      if (data.type === 'file-uploaded') {
        const scrollArea = document.getElementById('scrollArea');
        const newLine = document.createElement('div');
        newLine.textContent = `File ${data.name} uploaded`;
        scrollArea.appendChild(newLine);
        scrollArea.scrollTop = scrollArea.scrollHeight;
      }
    };

    function uploadFile() {
      const fileInput = document.getElementById('fileInput');
      const formData = new FormData();
      formData.append('file', fileInput.files[0]);

      fetch('/upload', {
        method: 'POST',
        body: formData
      })
      .then(response => response.text())
      .then(data => {
        console.log(data);
      })
      .catch(error => {
        console.error(error);
      });
    }
  </script>
</body>
</html>

解释

  1. 服务器端：

    • 使用 express 搭建 HTTP 服务器。
    • 使用 ws 库创建 WebSocket 服务器。
    • 使用 multer 处理文件上传。
    • 当文件上传成功时，通过 WebSocket 广播消息给所有连接的客户端。

  2. 客户端：

    • 通过 HTML 表单选择文件并上传。
    • 使用 WebSocket 接收文件上传成功的通知，并将消息添加到实时滚动区域中。

这样就实现了文件上传及实时滚动条的功能。


有哪 位同学弄过啊

ajax?

由于不是长连接 只有不断的poll

websocket 就是长连接啊

为了实现文件上传与实时滚动条的功能，我们可以使用WebSocket来实现实时通信。下面将详细说明如何使用Node.js、HTML5、JavaScript来完成这一功能，并且提供相应的示例代码。

后端（Node.js）

首先，我们需要安装ws库用于WebSocket服务端编程。可以使用以下命令进行安装：

npm install ws

接下来是服务器端的代码示例：

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
    ws.on('message', function incoming(message) {
        console.log('received: %s', message);
        // 将接收到的消息广播给其他客户端
        wss.clients.forEach(function each(client) {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

前端（HTML + JavaScript）

在前端页面中，我们将实现文件选择与上传功能，并监听WebSocket连接以接收并显示实时消息。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File Upload with WebSocket</title>
</head>
<body>
<input type="file" id="fileInput">
<div id="log"></div>
<script src="client.js"></script>
</body>
</html>

JavaScript (client.js):

const socket = new WebSocket('ws://localhost:8080');

document.getElementById('fileInput').addEventListener('change', function(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onload = function(e) {
        socket.send(e.target.result);
    };
    reader.readAsText(file);
});

socket.onmessage = function(event) {
    const logDiv = document.getElementById('log');
    const messageElement = document.createElement('div');
    messageElement.textContent = event.data;
    logDiv.appendChild(messageElement);
    logDiv.scrollTop = logDiv.scrollHeight; // 自动滚动到最新消息
};

总结

上述代码展示了如何通过WebSocket实现实时文件上传及消息显示。当用户选择一个文件后，文件内容将被读取并在上传过程中通过WebSocket发送。同时，客户端会监听服务器的消息并通过实时滚动条将新消息添加到界面上。这种方法可以有效地实现实时通信和文件传输功能。

回到顶部