socket.IO에서 처음으로 채팅 기능을 해봤어요.

이 신청은 리액트와 노드입니다.js와 socket.IO로 처음으로 채팅 기능을 해 봤어요.

프로비저닝

서버측

Node.js

socket.io

express

http

클라이언트

React

socket.io-client

서버측 (./index.js)

모듈 불러오기

우선 필요한 모듈을 읽습니다.
index.js

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http, {
  cors: {
    origin: '*',
    methods: ["GET", "POST"]
  }
});

express로 URL 처리

index.js

app.get('/', (req, res) => { 
  res.send({response:"good response"}).status(200);
});

http.listen(3001, () => {
  console.log('listening on http://localhost:3001');
});

socket.io에서 소켓 사용하기

socket.io 문서는 다음 링크를 참조하십시오.
https://socket.io/
https://socket.io/docs/v3/rooms/ 　(Rooms)
index.js

io.on('connection', (socket) => {
  //ユーザーのソケット接続時のイベント
  console.log('a user connected ' + socket.id);
  
  //ユーザーの名前設定時のイベント
  socket.on('set_nickname', (nickname) => {

    console.log(nickname + ' set his nickname');

    //クライアントサイドがメッセージを送信時のイベント
    socket.on("chat message c2s", (msg) =>{
      var nameAndMsgAndRoom = nickname + ": " + msg + " : in " + clientRoom;
      console.log(nameAndMsgAndRoom);
      //サーバーに接続しているすべてのユーザーにメッセージを送信
      socket.broadcast.emit("broadcast", nameAndMsgAndRoom);

    });
  });

  //ソケット切断時のイベント
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

클라이언트(React)

모듈 불러오기

App.js

import React, { useState } from 'react';
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://localhost:3001";

사용자 이름 설정

App.js

    const [socket, setSocket] = useState();
    const [nickname, setNickname] = useState("");

    function socketSetNickname(){
      const socket = socketIOClient(ENDPOINT);
      if (socket !== undefined){
        //ソケットを通してset_nicknameイベントを発火する
        socket.emit('set_nickname', nickname);
      }
      //ソケットオブジェクトはReactのStateで管理する
      setSocket(socket);
    };

클라이언트에서 메시지 보내기

App.js

    const [inputMessage, setInputMessage] = useState("");

    function addMessage() {
      if (socket !== undefined){
        //inputMessageはReactのStateで管理する
        console.log(inputMessage)
        socket.emit('chat message c2s', inputMessage);
      }
    };

사용자가 입력한 HTML 기술

App.js

    return (
        <div>
            <div>
                <input id="m1" autoComplete="off" placeholder="nickname" onChange={event => setNickname(event.target.value)}/>
                <button onClick={socketSetNickname}>submit</button>

                <input id="m2" autoComplete="off" placeholder="message" onChange={(event) => setInputMessage(event.target.value) }/>
                <button onClick={addMessage}>submit</button>
		    
                <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            </div>
        </div>
    )

적당한 곳에 이상의 코드를 써서 실행하면 초간단한 실시간 채팅 기능을 만들 수 있다.(part2에서 백엔드와 프론트 사이로 데이터를 보내려고 합니다.)
그래서 이 신청은 여기까지입니다.