تطبيق دردشة وإشعارات فورية

import { useState, useEffect, useRef } from 'react';import { io } from 'socket.io-client'; export default function App({ user }) {  const socket = useRef(null);  const [room, setRoom] = useState('');  const [messages, setMessages] = useState([]);  const [text, setText] = useState('');  const [typing, setTyping] = useState('');   useEffect(() => {    const s = io('http://localhost:3000', { auth: { name: user } });    s.on('message', (m) => setMessages(prev => [...prev, m]));    s.on('system', (t) => setMessages(prev => [...prev, { system: true, text: t }]));    s.on('typing', ({ name, on }) => setTyping(on ? `${name} يكتب…` : ''));    socket.current = s;    return () => s.disconnect();  }, [user]);   function join(r) {    socket.current.emit('join', r, (res) => {      if (res.error) return alert(res.error);      setRoom(r);      setMessages(res.history);    });  }   function send(e) {    e.preventDefault();    socket.current.emit('message', text, (res) => {      if (res.ok) setText('');    });    socket.current.emit('typing', false);  }   function onType(v) {    setText(v);    socket.current.emit('typing', v.length > 0);  }   if (!room) return (    <div>      <p>مرحبًا {user}، اختر غرفة:</p>      <button onClick={() => join('general')}># عامة</button>      <button onClick={() => join('cs242')}># cs242</button>    </div>  );   return (    <div>      <b># {room}</b>      <ul className="msgs">        {messages.map((m, i) => m.system          ? <li key={i} className="sys"><i>{m.text}</i></li>          : <li key={i}><b>{m.from}</b>: {m.text} <small>{m.at}</small></li>)}      </ul>      <p className="typing">{typing}</p>      <form onSubmit={send}>        <input value={text} onChange={e => onType(e.target.value)} placeholder="اكتب رسالة" />        <button>إرسال</button>      </form>    </div>  );}

const express = require('express');const http = require('http');const { Server } = require('socket.io'); const app = express();const server = http.createServer(app);const io = new Server(server, { cors: { origin: '*' } }); const history = { general: [], cs242: [] };            // آخر الرسائل لكل غرفة // وسيط الاتصال: يرفض من لا يرسل اسمًاio.use((socket, next) => {  const name = socket.handshake.auth.name;  if (!name) return next(new Error('الاسم مطلوب'));  socket.data.name = name;  next();}); io.on('connection', (socket) => {  const name = socket.data.name;  console.log('اتصل', name);   socket.on('join', (room, ack) => {    if (!history[room]) return ack({ error: 'غرفة غير موجودة' });    socket.rooms.forEach(r => r !== socket.id && socket.leave(r));   // غرفة واحدة في كل مرة    socket.join(room);    socket.to(room).emit('system', `${name} دخل الغرفة`);    ack({ ok: true, history: history[room] });  });   socket.on('message', (text, ack) => {    const room = [...socket.rooms].find(r => r !== socket.id);    if (!room) return ack({ error: 'ادخل غرفة أولًا' });    if (!text || !text.trim()) return ack({ error: 'رسالة فارغة' });    const msg = { from: name, text: text.trim(), at: new Date().toISOString().slice(11, 16) };    history[room].push(msg);    if (history[room].length > 50) history[room].shift();    io.to(room).emit('message', msg);    ack({ ok: true });  });   socket.on('typing', (on) => {    const room = [...socket.rooms].find(r => r !== socket.id);    if (room) socket.to(room).emit('typing', { name, on });  });   socket.on('disconnect', () => console.log('خرج', name));}); server.listen(3000, () => console.log('خادم الدردشة يعمل'));

import { useState, useEffect } from 'react';import { io } from 'socket.io-client'; export default function App({ user }) {  const [status, setStatus] = useState('…');   useEffect(() => {    const token = user === 'سارة' ? 'good-token' : 'stolen-token';    const s = io('http://localhost:3000', { auth: { token } });    s.on('connect', () => setStatus('✓ متصل بهوية موثّقة'));    s.on('connect_error', (err) => setStatus('✗ رُفض الاتصال: ' + err.message));    return () => s.disconnect();  }, [user]);   return <p>{user}: {status}</p>;}

const http = require('http');const { Server } = require('socket.io');const server = http.createServer();const io = new Server(server, { cors: { origin: '*' } }); io.use((socket, next) => {  // في المشروع: jwt.verify(socket.handshake.auth.token, SECRET)  if (socket.handshake.auth.token !== 'good-token') return next(new Error('رمز غير صالح'));  next();}); io.on('connection', () => console.log('اتصال موثّق'));server.listen(3000);

import { useState, useEffect } from 'react';import { io } from 'socket.io-client'; export default function App({ user }) {  const [toasts, setToasts] = useState([]);   useEffect(() => {    const s = io('http://localhost:3000', { auth: { name: user } });    s.on('notify', (n) => setToasts(prev => [...prev, n]));    return () => s.disconnect();  }, [user]);   async function grade() {    // المعلم يرصد درجة عبر REST، والخادم يُشعر الطالب فورًا    await fetch('http://localhost:3000/api/grades', {      method: 'POST', headers: { 'Content-Type': 'application/json' },      body: JSON.stringify({ student: 'ريم', grade: 95 }),    });  }   return (    <div>      {user === 'المعلم' && <button onClick={grade}>ارصد درجة ريم</button>}      {toasts.map((t, i) => <p key={i} className="toast">🔔 {t}</p>)}      {user !== 'المعلم' && !toasts.length && <p>لا إشعارات بعد…</p>}    </div>  );}

const express = require('express');const http = require('http');const { Server } = require('socket.io');const app = express();app.use(express.json());const server = http.createServer(app);const io = new Server(server, { cors: { origin: '*' } }); io.on('connection', (socket) => {  socket.join('user:' + socket.handshake.auth.name);    // غرفة خاصة لكل مستخدم}); app.post('/api/grades', (req, res) => {  const { student, grade } = req.body;  // ... الحفظ في قاعدة البيانات ...  io.to('user:' + student).emit('notify', `رُصدت درجتك: ${grade}`);  res.status(201).json({ ok: true });}); server.listen(3000);