Я создаю приложение чата в качестве проекта в школе и пытаюсь добавить 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>
В принципе я не уверен, как бы я go подключил серверную часть, на которой выполняется отдельный запуск. как я мог бы использовать socket-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>
)
}
InputAddon. js -
import React from 'react';
const InputAddon = () => {
console.log('clicked')
}
export default InputAddon;
BACKEND -
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 месяцев в моей карьере программиста, поэтому мне еще есть чему поучиться.