سلام وقتتون بخیر
من میخوام یک پروژه چت با react.js و express.js طراحی کنم
من در راه اندازی socket.io مشکل دارم وقتی هم ایونت connection رو می نویسم داخلش اصلا هیچ لاگی نشون نمیده
فایل server.js
const express = require("express");
const io = require('socket.io');
const app = express();
app.get('/', (req, res) => res.send('به چت روم خوش آمدید'));
const server = app.listen(8000, (err) => {
console.log('Server is Running ...');
});
const socket = io(server);
const mySocket = socket.of('/socket');
mySocket.on('connection', (socket) => {
console.log('User');
});
فایل Chatroom.jsx که کدهای مربوط به صفحه چت روم داخلش هست میخوام با server.js ارتباط کنه
import React, { useRef, useState, useEffect } from 'react';
import SocketIOClient from 'socket.io-client';
import useDarkmode from "../Darkmode/useDarkmode";
import './chatroom.css';
import classNames from 'classnames';
const Chatroom = (props) => {
// Hooks
const [theme, switchTheme] = useDarkmode();
const [newMessage, setNewMessage] = React.useState('');
const [message, setMessage] = React.useState([]);
// Connect Socket.io
const socket = React.useRef(SocketIOClient.connect("http://localhost:8000/socket"));
React.useEffect(() => {
console.log(props.location.state);
}, []);
const sendMessage = () => {
if(!newMessage) return;
socket.current.emit('newMessage', {
id: '',
text: newMessage,
sender: {
name: props.location.state.name,
gender: props.location.state.gender
},
})
};
// Layout Chatroom Page
return (
<>
<div className="center">
<div className="container-chatroom">
<h1 className="title">چت روم</h1>
<div className="app">
<section id="messages">
<ul className="message-list">
{
message.map((message) => {
return <>
<li className={classNames("message-list__item", message.sender.name === props.location.state.name && "leftMessage")}>
<div>
<div className="row">
<img title={message.sender.name} className="user-img" src={message.sender.gender === 'male' ? '/images/male_user.png' : '/images/famale_user.png'} alt="User" />
<h4 className="userName">{message.sender.name}:</h4>
<p className="userText">{message.text}</p>
</div>
<span className="time">4:20</span>
<button className="btn-delete" title="حذف پیام"><i className="fas fa-trash"></i></button>
</div>
</li>
<hr className="divider-message" />
</>
})
}
</ul>
</section>
<section id="send-message">
<form action="#" id="form">
<input maxLength="80" className="text-message" value={newMessage} onChange={e => setNewMessage(e.target.value)} placeholder="پیام خود را بنویسید ..." required />
<button type="submit" onClick={sendMessage} className="btn-send" title="ارسال پیام"><i class="fa fa-paper-plane"></i></button>
</form>
</section>
</div>
</div>
</div>
</>
)
};
export default Chatroom;
اصلا هیچ خطایی نشون نمیده باید log بگیره ولی نمیگیره
انگار سوکت اصلا کار نمی کنه
با سلام خدمت شما
برای اینکار شما حتما نیاز به بررسی دقیق دارید.
اولین راه حل اینکه از نرم افزار پست من (PostMan) قسمت WebSocket استفاده بکنید برای بررسی اتصال درست به آدرس سوکت
آموزش استفاده از WebSocket در PostMan در این سایت.
راه حل دوم اینکه از mySocket.on("error") استفاده بکنید و مشکل رو در محیط Console نمایش بدید.
مستندات مربوط به error.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟