javascript - 我将如何使用 Socket-IO 上传图像文件？

Question

我正在将一个聊天应用程序作为学校的一个项目，我正在尝试添加一个运行函数的 onClick，该函数使用 socket-io-file-upload 来运行提示函数。来自 socket-io-file-upload 文档。 调用该方法时，会提示用户选择要上传的文件。

JavaScript:

document.getElementById("file_button").addEventListener("click", instance.prompt, false);
HTML:

<button id="file_button">Upload File</button>

基本上，我不确定我将如何连接正在运行的后端，我将如何使用 socket-io，在 react 前端中使用文件上传。 .

这是我现在以某种方式与此组件相关的文件 -仅供引用 - 使用样式化组件

前端:

我的 Reducer(可能相关)-

import React from "react";
import io from "socket.io-client";
export const CTX = React.createContext();

const initState = {
  selectedChannel: "general",
  socket: io(":3001"),
  user: "RandomUser",
  allChats: {
    general: [''],
    channel2: [{ from: "user1", msg: "hello" }],
  },
};
const reducer = (state, action) => {
  console.log(action);
  switch (action.type) {
    case "SET_CHANNEL_NAME":
      const newChannelName = action.payload;
      return {
        ...state,
        allChats: {
          ...state.allChats,
          [newChannelName]: [{from: "ChatBot", msg: "Welcome to a new chatroom!"}]
        }
      }
    case "CREATE_CHANNEL":
      return {
        ...state,
        allChats: {
          ...state.allChats,
          newChannel: [ {from: "chatbot", msg: "Welcome to a new chatroom! Type away!"}]
        }
      };
    case "SET_USER_NAME":
      return {
        ...state,
        user: action.payload,
      };
    case "SET_SELECTED_CHANNEL":
      return {
        ...state,
        selectedChannel: action.payload,
      };
    case "RECEIVE_MESSAGE":
      const { from, msg, channel } = action.payload;
      return {
        ...state,
        allChats: {
          ...state.allChats,
          [channel]: [...state.allChats[state.selectedChannel], { from, msg }],
        },
      };
    default:
      return state;
  }
};

// const sendChatAction = (value) => {
//     socket.emit('chat message', value);
// }

export const Store = (props) => {
  const [state, dispatch] = React.useReducer(reducer, initState);

  const myDispatch = (type, payload) => {
    if (typeof type === "object" && type !== null) {
      dispatch(type);
    }
    dispatch({ type, payload });
  };

  return (
    <CTX.Provider value={{ state, dispatch: myDispatch }}>
      {props.children}
    </CTX.Provider>
  );
};

聊天框.js -

import React from "react";
import styled from "styled-components";
import Sidebar from "../Sidebar";
import io from 'socket.io-client'
import UserMessage from "../UserMessage";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faPlus } from '@fortawesome/free-solid-svg-icons'
import InputAddon from '../InputAddon'



import { CTX } from '../Store'


const ChatBox = () => {
  const [textValue, changeTextValue] = React.useState('');

  const { state, dispatch } = React.useContext(CTX);
  console.log(state.user)
  React.useEffect(() => {
    console.log(state.user)

    state.socket.on('message', function (msg) {
      console.log("chat message recieved")
      dispatch('RECEIVE_MESSAGE', msg);
    })
  }, [])



  const onKeyPressHandler = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      console.log("PRESSED")
      state.socket.emit('sent message', { from: state.user, msg: textValue, channel: state.selectedChannel });
      dispatch('RECEIVE_MESSAGE', { from: state.user, msg: textValue, channel: state.selectedChannel });
      changeTextValue('')
    }
  }

  const onChangeHandler = e => {
    changeTextValue(e.target.value);
  }


  return (

    <Layout>
      <Sidebar />
      <Wrapper>
        <InnerBoxWrapper>
          <InnerBox>
            <UserMessage />
            <InputWrapper>
              <InputAddons id="InputAddon">
                <FontAwesomeIcon icon={faPlus} onClick={InputAddon}></FontAwesomeIcon>
              </InputAddons>
              <input
                label="Send a chat"
                onChange={onChangeHandler}
                value={textValue}
                onKeyPress={onKeyPressHandler}
              />
            </InputWrapper>
          </InnerBox>
        </InnerBoxWrapper>
      </Wrapper>
    </Layout>
  )
}

InputAddon.js -

import React from 'react';

const InputAddon = () => {
    console.log('clicked')
}

export default InputAddon;

后端 -

www.js-

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('cryptidbackend:server');
var http = require('http').createServer(app);
const io = require('socket.io')(http);
const siofu = require('socketio-file-upload')
const cors = require('cors');
app.use(cors());
// Socket.io 

io.on('connection', function (socket) {
  const uploader = new siofu(socket);
  uploader.prompt(document.getElementById("InputAddon"))
  uploader.listen(socket)
  socket.on('sent message', function (msg) {
    console.log('message' + ' : ' + JSON.stringify(msg))
    socket.broadcast.emit('message', msg);
  })
})


/**
 * Get port from environment and store in Express.
 */
http.listen(3001, function () {
  console.log('listening on 3001')
})

应用程序.js -

const siofu = require('socketio-file-upload')
const app = express()

const cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");
const session = require("express-session");
const FileStore = require("session-file-store")(session);
const upload = require("express-fileupload");

app.use(siofu.router)

app.use(upload());
console.log("Server Started!");

app.use(logger("dev"));

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(
  session({
    resave: false,
    secret: "hello",
    saveUninitialized: true,
    is_logged_in: false,
  })
);

const indexRouter = require("./routes/index");
app.use("/", indexRouter);

const usersRouter = require('./routes/users');
app.use('/users', usersRouter);

module.exports = app;

如果您有任何问题，或者可以给我任何提示，我的编码职业生涯才大约 5 个月，所以我还有很多东西要学。

Answer 1

为了从前端上传文件，您需要做的是在 ChatBox 组件内的 useEffect 中在前端创建一个 socket-file-upload 实例。

您还需要创建一个虚拟隐藏输入，您可以在点击上传按钮时模拟点击，还可以在其上收听

您需要添加的小片段代码

  const fileRef = useRef(null);
  useEffect(() => {
     const siofu = new SocketIOFileUpload(state.socket);
     // call listen on input and pass the hidden input ref
     siofu.listenOnInput(fileRef.current);
  }, [state.socket])

  const InputAddon = () => {
     // Trigger click on fileRef input
     fileRef.current.click();
  }

带输入的完整组件代码

import SocketIOFileUpload from 'socketio-file-upload';
const ChatBox = () => {
  const [textValue, changeTextValue] = React.useState('');

  const { state, dispatch } = React.useContext(CTX);
  console.log(state.user)
  React.useEffect(() => {
    console.log(state.user)

    state.socket.on('message', function (msg) {
      console.log("chat message recieved")
      dispatch('RECEIVE_MESSAGE', msg);
    })
  }, [])





  const onKeyPressHandler = (e) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      console.log("PRESSED")
      state.socket.emit('sent message', { from: state.user, msg: textValue, channel: state.selectedChannel });
      dispatch('RECEIVE_MESSAGE', { from: state.user, msg: textValue, channel: state.selectedChannel });
      changeTextValue('')
    }
  }

  const onChangeHandler = e => {
    changeTextValue(e.target.value);
  }
  const fileRef = useRef(null);
  useEffect(() => {
     const siofu = new SocketIOFileUpload(state.socket);
     // call listen on input and pass the hidden input ref
     siofu.listenOnInput(fileRef.current);
  }, [state.socket])

  const InputAddon = () => {
     // Trigger click on fileRef input
     fileRef.current.click();
  }

  return (

    <Layout>
      <Sidebar />
      <Wrapper>
        <InnerBoxWrapper>
          <InnerBox>
            <UserMessage />
            <InputWrapper>
              <InputAddons id="InputAddon">
                <FontAwesomeIcon icon={faPlus} onClick={InputAddon}></FontAwesomeIcon>
              </InputAddons>
               <input
                ref={fileRef}
                label="file-picker"
                type="file"
                style={{display: 'none'}}
              />
              <input
                label="Send a chat"
                onChange={onChangeHandler}
                value={textValue}
                onKeyPress={onKeyPressHandler}
              />
            </InputWrapper>
          </InnerBox>
        </InnerBoxWrapper>
      </Wrapper>
    </Layout>
  )
}

在后端代码中，您需要创建一个快速服务器并向其添加 sockiofileUpload 路由器

var app = require('../app');
var debug = require('debug')('cryptidbackend:server');
const socketio = require('socket.io');

/**
 * Get port from environment and store in Express.
 */
app.listen(3001, function () {
  console.log('listening on 3001')
})



var io = socketio.listen(app);

// Socket.io 

io.sockets.on('connection', function (socket) {
    const uploader = new siofu(socket);
    uploader.listen(socket)
    uploader.dir = "/srv/uploads";
    uploader.listen(socket);

    // Do something when a file is saved:
    uploader.on("saved", function(event){
        console.log(event.file);
    });

    // Error handler:
    uploader.on("error", function(event){
        console.log("Error from uploader", event);
    });
})

---

应用程序.js

const siofu = require('socketio-file-upload')
const app = express()

const cors = require("cors");
const bodyParser = require("body-parser");
const logger = require("morgan");
const session = require("express-session");
const FileStore = require("session-file-store")(session);

app.use(siofu.router)

console.log("Server Started!");

app.use(logger("dev"));

app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(
  session({
    resave: false,
    secret: "hello",
    saveUninitialized: true,
    is_logged_in: false,
  })
);

const indexRouter = require("./routes/index");
app.use("/", indexRouter);

const usersRouter = require('./routes/users');
app.use('/users', usersRouter);