ReactとSocket.ioでチャットアプリを自作！リアルタイム通信の基本と実装方法を徹底解説

"I want to make a chat app with React."
Do you think real-time communication is difficult?

In fact, if you use React and communication tools such as Socket.io,A chat app that anyone can use to easily communicate in real timeYou can create it.

In this article,Sending and receiving messages, displaying them, managing sender names, and connecting to serversExplained in an easy-to-understand manner.
Includes code, and is written in a way that even elementary school students can understand, allowing you to build the finished product in one go.is.

table of contents

Why build a chat app with React?
1. Why is chat functionality needed now?
React and Real-time Communication Basics
1. What are WebSockets and Socket.io?
Creating a chat app screen layout
1. Design the message input and display fields
Implementing real-time communication with Socket.io
1. Connect to the server and send messages
Server-side construction (Node.js)
1. Simple configuration with Express and Socket.io
Improvements to the chat app
1. How can we make the app practical?
Completed code summary
1. Frontend (React)
2. Backend (Node.js)
summary

Why build a chat app with React?

Why is chat functionality needed now?

Conclusion: Real-time connection mechanisms are required for all web services.

For example, chat is used in the following services:

Online consultation and customer support
Educational services and tutoring exchanges
Internal communication tools (e.g. Slack)
SNS, Matching Services, In-game Chat

What these have in common is thatUsers can exchange messages in real timeis.

The Ministry of Economy, Trade and Industry is also promoting DX.Introducing a means of communication with high speedWe recommend
(Reference: https://www.meti.go.jp/policy/it_policy/digital_transformation/index.html).

Combining React with real-time communicationFast and flexible chat featuresYou can implement it yourself.

React and Real-time Communication Basics

What are WebSockets and Socket.io?

Conclusion: It is a system that allows you to exchange data with the server in real time.

Normal communication is one-way: request → response.

But in chat,There should always be a two-way exchange.

For that purpose,WebSocketIn React, we made it easier to useSocket.ioThis library is often used.

1	`npm` `install` `socket.io-client`

Also, Node.js and Socket.io are required on the server side.

1	`npm` `install` `express socket.io`

Creating a chat app screen layout

Design the message input and display fields

Conclusion: A simple "name, text, and submit button" structure is enough.

The UI will be configured as follows:

Message display area (your messages and the other person's messages are displayed)
Text input field (form)
Submit button
User name setting field

function ChatUI({ messages, sendMessage }) { const [text, setText] = useState(&#039;&#039;); const handleSubmit = (e) =&gt; { e.preventDefault(); sendMessage(text); setText(&#039;&#039;); }; return (
    <div>
      <div style="{{" border: '1px solid gray', height: '300px', overflowy: 'scroll' }}>
        {messages.map((msg, i) =&gt; (
          <div key="{i}"><strong>{msg.user}:</strong> {msg.text}</div>
        ))}
      </div>
      <form onsubmit="{handleSubmit}" action="">
        <input value="{text}" onchange="{(e)" > setText(e.target.value)
        <button type="submit">send</button>
      <input type="hidden" name="trp-form-language" value="en"/></form>
    </div>
  );
}

Implementing real-time communication with Socket.io

Connect to the server and send messages

Conclusion: Socket.ioemitandonYou can send and receive messages just by using

import io from &#039;socket.io-client&#039;; const socket = io(&#039;http://localhost:4000&#039;); // Server URL function ChatApp() { const [messages, setMessages] = useState([]); const [user, setUser] = useState(&#039;guest&#039;); useEffect(() =&gt; { socket.on(&#039;chat-message&#039;, (msg) =&gt; { setMessages((prev) =&gt; [...prev, msg]); }); return () =&gt; socket.off(&#039;chat-message&#039;); }, []); const sendMessage = (text) =&gt; { const msg = { user, text }; socket.emit(&#039;chat-message&#039;, msg); setMessages((prev) =&gt; [...prev, msg]); }; return (
    <div>
      <h2>Real-time chat</h2>
      <input value="{user}" onchange="{(e)" > setUser(e.target.value)} placeholder=&quot;Enter your name&quot; /&gt;
      <chatui messages="{messages}" sendmessage="{sendMessage}" />
    </div>
  );
}

Server-side construction (Node.js)

Simple configuration with Express and Socket.io

Conclusion: You can create a real-time communication server in about 10 lines of code.

const express = require('express'); const app = express(); const server = require('http').createServer(app); const io = require('socket.io')(server, { cors: { origin: '*' } }); io.on('connection', (socket) => { console.log('User connected'); socket.on('chat-message', (msg) => { io.emit('chat-message', msg); // Send to all clients }); }); server.listen(4000, () => { console.log('Server started on port 4000'); });