react.js+express socket.ioチャットルームの使用

今回は、リアルタイムチャット機能が必要な2つのプロジェクトを作成しました.ううう
だからソケットioを使用してリアルタイムチャット機能を作成してみます.
expressインストールとプリファレンスreactのインストールとプリファレンスはスキップされます.
説明する前にアプリケーション.jsから配布される情報.jsおよびexpressサーバのサーバを作成します.jsを例に説明します.
まずはコンセントioは3つの重要なことを覚えなければならない.

emit

join

on

1つ目はemit
Emitはその名の通り事件を引き起こす.
例:
server.jsで

socket.emit('your id',socket.id);

このようなコードがあります.
message.jsで

socket.on("your id",id=>{
            this.setState({
                yourID:id
            })
        })

このようなコードがあります.この言葉はサーバーです.jsでは、イベントが「id」という名前の場所で発生し、イベント結果メッセージが表示されます.jsで
サーバは、「your id」という名前のソケットコードにあります.jsのsocket.idの値をidに保存し、messageします.これはjsの状態値yourIDに保存されているコードです.
ここにonという場所がありますが、これがemitによるイベントを受信する場所だと思います.
そしてjoin
実は簡単で私の最も混同している部分です
私はあなたたちが話していることを知っていますが、どうやって部屋を分けますか?
ユーザとユーザの会話の内容もdbに含めたいのでroomを区別するのは難しい.
joinもイベントだと思ったら簡単です.socketは自分で部屋を管理します.
私が作成したコードを見てみましょう.
最初はサーバーjsです.

const express = require('express')
const app = express()
const port = 3001
var http = require('http').createServer(app);
const io = require('socket.io')(http);

io.on("connection", function(socket) {
    socket.on('room', function (user_id) { //I use the user_id of the user to create room

        socket.join(user_id,()=>{
            console.log(user_id+'방입장');
        });
    });
    console.log('a user connected');
    socket.on("send message",messageobject=>{
        console.log(messageobject.name);
        console.log(messageobject.body);
        io.to(messageobject.name).emit("message",messageobject.body);
    })
    
})


http.listen(port, () => console.log(`Example app listening on port ${port}!`))

最初のioon(「connection」,~これはソケット接続の一部です.
そしてここでon(「room」)が表示され、これは部屋を作成する部分と理解されます.
jybin 96ユーザーがsocketである場合Emitは、jybin 96というuser id送信信号を含む.
このコードはコールバック関数でjybin 96という部屋に入ります.
2番目
socket.on(「send message」)という名前のコードが表示された場合、jybin 96という名前のユーザーsocketによってコードが表示されます.Emitはその後、独自のユーザー名とメッセージを送信します.
そこはIOto(messageobject.name). Emit部分は重要であり,to()部分はjybin 96号室に参加するすべてのユーザに情報を送信する部分である.

export default class Message extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            anchorEl : null,
            open:false,
            chat:'',
            yourID:'',
            messages:[],
            message:""
        }
        this.handleClose = this.handleClose.bind(this);
        this.handleopen = this.handleopen.bind(this);
        this.keyboard = this.keyboard.bind(this);
        this.onChange =this.onChange.bind(this);
    }
    receivemessage=(message)=>{
        this.setState({
            messages:[...this.state.messages,message]
        })
    }
    componentWillMount(){
        const user_id = "jybin96"
        socket.emit('room',user_id);
        socket.on("your id",id=>{
            this.setState({
                yourID:id
            })
        })
        socket.on("message",(message)=>{
            console.log(message);
            this.receivemessage(message);

        })
    }
    onChange(e){
        this.setState({
            message: e.target.value,
          });
          console.log(this.state.message);
          
    }
    keyboard(e){
        console.log(e.keyCode);
        if(e.keyCode == 13){
            console.log(`엔터키누름 :  ${this.state.chat}`);    //여기서 전송
            const messageobject = {
                name:"jybin96",
                body:this.state.message,
                id:this.state.yourID,
            }
            this.setState({
                message:""
            })
            socket.emit("send message",messageobject);
        }
       
    }
    handleClose (e){
       
        this.setState({
            anchorEl:null
        })
    }

    handleopen(e){
        this.setState({
            anchorEl: e.currentTarget,
            open:Boolean(e.currentTarget)
        })
    } 
   
    render(){
        const {handleClose,handleopen,keyboard,onChange} =this;
        const {classes} = this.props;
        return(
            <div>
               <div>
                   {this.state.messages.map((message,index)=>{
                           return(
                               <div>
                                   {index}
                                   {message}
                                </div>
                           )
                       
                   })}
               </div>
                <label>입력</label>
                    <TextField id="outlined-basic" variant="outlined" placeholder="입력하세요." onKeyDown={keyboard} onChange={onChange} value={this.state.message}/>
            </div>
            
        )
    }
} 

このコードはMessageです.jsコード.
このコードをコピーして実行する場合は、material-uiを使用しているため、すぐには戻りません.
npm install @material-ui/core
インストールしてください.
このコードを見れば少しずつ理解できると信じています.
このコードだけでは二つの部屋を作ることができません.
だから.

import React, { useRef } from 'react';
import TextField from '@material-ui/core/TextField';
import io from 'socket.io-client';


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

const style  = {
    paper: {
        height: "auto",
        width: "auto",
    },
    
  };
export default class Message2 extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            anchorEl : null,
            open:false,
            chat:'',
            yourID:'',
            messages:[],
            message:""
        }
        this.handleClose = this.handleClose.bind(this);
        this.handleopen = this.handleopen.bind(this);
        this.keyboard = this.keyboard.bind(this);
        this.onChange =this.onChange.bind(this);
    }
    receivemessage=(message)=>{
        this.setState({
            messages:[...this.state.messages,message]
        })
    }
    componentWillMount(){
        const user_id = "snsk3779"
        socket.emit('room',user_id);
        socket.on("your id",id=>{
            this.setState({
                yourID:id
            })
        })
        socket.on("message",(message)=>{
            console.log(message);
            this.receivemessage(message);

        })
    }
    onChange(e){
        this.setState({
            message: e.target.value,
          });
          console.log(this.state.message);
          
    }
    keyboard(e){
        console.log(e.keyCode);
        if(e.keyCode == 13){
            console.log(`엔터키누름 :  ${this.state.chat}`);    //여기서 전송
            const messageobject = {
                name:"snsk3779",
                body:this.state.message,
                id:this.state.yourID,
            }
            this.setState({
                message:""
            })
            socket.emit("send message",messageobject);
        }
       
    }
    handleClose (e){
       
        this.setState({
            anchorEl:null
        })
    }

    handleopen(e){
        this.setState({
            anchorEl: e.currentTarget,
            open:Boolean(e.currentTarget)
        })
    } 
   
    render(){
        const {handleClose,handleopen,keyboard,onChange} =this;
        const {classes} = this.props;
        return(
            <div>
               <div>
                   {this.state.messages.map((message,index)=>{
                           return(
                               <div>
                                   {message}
                                </div>
                           )
                       
                   })}
               </div>
                <label>입력</label>
                    <TextField id="outlined-basic" variant="outlined" placeholder="입력하세요." onKeyDown={keyboard} onChange={onChange} value={this.state.message}/>
            </div>
            
        )
    }
} 

message2.もっとjsを使います.
コードは同じですが、メッセージです.jsの部屋はjybin 96
message2.jsの部屋はsns k 3779
使用して実行する場合

こうなるルーティング「/」はmessage 2であることに注意してください.js,'/pin'はmessageです.jsです.ほほほ
こうして一人一人がtextfieldで検索すると

このようにして、2つの部屋の2人がそれぞれソケット通信を行っているのが見えます.
これは私がグーグルで検索した内容で、コードが悪いかもしれません.ううう
でもやっぱりコードが面白いとヒントになりました
2つのプロジェクトのチャット機能を作成できます.