Blu*_*lue 3 javascript node.js express socket.io reactjs
我正在学校制作一个聊天应用程序作为一个项目，我正在尝试添加一个运行函数的 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>
基本上，我不确定如何连接后端，该后端是单独运行的，如何在反应前端中使用套接字io，就使用文件上传而言。
以下是我现在以某种方式与该组件相关的文件 - 仅供参考 - 使用样式组件
前端：
我的减速器（也许相关）-
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>
)
}
输入插件.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 个月左右，所以我还有很多东西需要学习。
为了从前端上传文件，您需要做的是在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>
)
}
在后端代码中，您需要创建一个express服务器并向其添加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);