Socket.IO ve React ile Gerçek Zamanlı Sohbet Uygulaması Geliştirme

Proje Genel Bakışı

Bu eğitim, Socket.IO ve React kullanarak gerçek zamanlı bir sohbet uygulaması nasıl geliştirilir göstermektedir.

Backend Kurulumu

const express = require('express');
const socketIO = require('socket.io');

const app = express();
const server = app.listen(4000, () => {
  console.log('Sunucu 4000 portunda çalışıyor');
});

const io = socketIO(server);

io.on('connection', (socket) => {
  socket.on('message', (msg) => {
    io.emit('message', msg);
  });
});

Frontend ile React

import React, { useState, useEffect } from 'react';
import io from 'socket.io-client';

const socket = io('http://localhost:4000');

function ChatApp() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');

  useEffect(() => {
    socket.on('message', (msg) => {
      setMessages([...messages, msg]);
    });
  }, [messages]);

  const sendMessage = () => {
    socket.emit('message', input);
    setInput('');
  };

  return (
    <div>
      <div>
        {messages.map((msg, i) => (
          <p key={i}>{msg}</p>
        ))}
      </div>
      <input value={input} => setInput(e.target.value)} />
      <button
    </div>
  );
}

Sonuç

Artık tamamen işlevsel bir gerçek zamanlı sohbet uygulamasına sahipsiniz!