react-tomato-talk

react socket.io, socket.io-client .

*n:n * . flex . socket.io sockjs .

** .** ** .** ** Heroku .**

npm npm i react-tomato-talk
//or
yarn add react-tomato-talk

import React from 'react';
import ReactTomatoTalk from 'react-tomato-talk';

const App = function () {
    return (
        <main>
            
            <section
                className="container"
                style={{
                    display: "flex", // tomatoTalk  flex   .
                    flex: "1",
                    maxWidth: "350px", // maxWidth       .
                    maxHeight: "645px" // height      .
                }}
            >
                <ReactTomatoTalk
                    url={'http://localhost:3000/'} // url.
                    imageSize={5} // MB      . Props    1MB.
                    secretKey=' ' //     config   .
                />
            </section>
        </main>
    );
};

   connection, rooms, headCount, join, send, sendImage, leave, disconnect .  
       .

const { Server } = require("socket.io"); // cors  .
const CryptoJS = require("crypto-js"); //      crypto-js 
const io = new Server({
    transports: ["websocket"], //    .
    maxHttpBufferSize: 5 * 1024 * 1024 //     5(MB) * 1024 * 1024 = MB
});

const usrList = {}; //     ;
const roomList = ['#1', '#1'] //    2   .
const rooms = { //    
    "#1": [],
    "#1": [],
}; //       roomList  1    .
io.on("connection", (client) => {
    client.on('rooms', () => { //     
        io.emit('rooms', roomList);
    });
    client.on('headCount', () => { //        
        io.emit('headCount', rooms);
    });
    client.on('join', data => { // {socketIdx, room}       .
        client.join(data.room); //   join
        usrList[data.socketIdx] = data.room; //      
        rooms[data.room].push(data.socketIdx); //    
        io.to(data.room).emit('joinRoom', data.socketIdx); //     
    });
    client.on('leave', data => { // {socketIdx, room}       .
        client.leave(data.room); // room .
        delete usrList[data.socketIdx]; //    
        rooms[data.room] = this.rooms[data.room].filter((el) => el !== data.socketIdx); //     
        io.to(data.room).emit('leaveRoom', data.socketIdx); //    
    });
    client.on('send', data => { // {message, socketIdx, room}       
        //        .
        data = JSON.parse(CryptoJS.AES.decrypt(data, ' ').toString(CryptoJS.enc.Utf8)); //    
        //  
        io.to(data.room).emit('receive', CryptoJS.AES.encrypt(JSON.stringify({
            message: data.message,
            idx: data.socketIdx
        }), ' ').toString());

        //  
        io.to(data.room).emit('receive', {
            message: data.message,
            idx: data.socketIdx
        });
    });
    client.on('sendImage', data => { // {socketIdx, message, room}        
        io.to(data.room).emit('receiveImage', {
            message: data.message,
            idx: data.socketIdx
        });
    });
    client.on('disconnect', () => { //         
        if (usrList[client.id]) {
            io.to(usrList[client.id]).emit('leaveRoom', client.id); //    
            rooms[usrList[client.id]] = rooms[usrList[client.id]].filter((el) => el !== client.id); //     
            delete usrList[client.id]; //     
        }
    });
});

io.listen(3000);