javascript - 我将如何使用 Socket-IO 上传图像文件?
问题描述
我正在制作一个聊天应用程序作为学校的一个项目,并且我正在尝试添加一个 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>
基本上,我不确定如何连接后端,该后端正在单独运行,以了解如何在反应前端使用文件上传..
以下是我现在以某种方式与此组件相关的文件 - 仅供参考 - 使用样式化组件
前端:
我的减速机(可能相关)-
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>
);
};
ChatBox.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')
})
app.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 个月,所以我还有很多东西要学。
解决方案
为了从前端上传文件,您需要做的是在 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);
推荐阅读
- javascript - NPM:如何添加不为包消费者运行的“安装后”挂钩?
- powershell - Out-Gridview 快速过滤器搜索不允许空格
- python - 我可以在 python 的图形模块中使用 RGB 吗?
- javascript - JavaScript 中的循环和计数
- postgresql - Is there a way that I can access saved entities within a transaction in TypeORM?
- python - 如何在python的dict继承中使用items()和values()强制调用__getitem__
- ios - iOS 14 通知不显示图像
- node.js - ZeroMQ 重传 pub-sub 模型
- selenium-webdriver - 树莓派 4:selenium.common.exceptions.SessionNotCreatedException:消息:无法找到匹配的功能集
- c - VSCode Coderunner 问题