간단한 채팅 앱을 위한 Socket.io

기본 채팅 애플리케이션에서 사용자는 먼저 채팅방에 입장합니다. 사용자는 먼저 환영 메시지를 받습니다.

서버 측은 새로 입력된 사용자에게만 "인사 메시지"를 보냅니다. 사용자는 분명히 첫 번째 환영 메시지 이후에 인사를 받고 싶어하지 않습니다.
사용자는 다른 사용자에게 메시지를 보내기 시작하지만 모든 사람에게 브로드캐스트하고 싶지는 않습니다.

"io"는 들어오는 이벤트를 수신 대기하는 인스턴스에 연결된 Socket.IO 서버 인스턴스입니다.
io 변수는 소켓 그룹을 나타냅니다. 소켓 변수는 각 개별 연결과 통신하기 위한 것입니다.

socket.io 함수 목록

socket.emit('message', "this is a test"); //sending to sender-client only
socket.broadcast.emit('message', "this is a test"); //sending to all clients except sender
socket.broadcast.to('game').emit('message', 'nice game'); //sending to all clients in 'game' room(channel) except sender
socket.to('game').emit('message', 'enjoy the game'); //sending to sender client, only if they are in 'game' room(channel)
socket.broadcast.to(socketid).emit('message', 'for your eyes only'); //sending to individual socketid
io.emit('message', "this is a test"); //sending to all clients, include sender
io.in('game').emit('message', 'cool game'); //sending to all clients in 'game' room(channel), include sender
io.of('myNamespace').emit('message', 'gg'); //sending to all clients in namespace 'myNamespace', include sender
socket.emit(); //send to all connected clients
socket.broadcast.emit(); //send to all connected clients except the one that sent the message
socket.on(); //event listener, can be called on client to execute on server
io.sockets.socket(); //for emiting to specific clients
io.sockets.emit(); //send to all connected clients (same as socket.emit)
io.sockets.on() ; //initial connection from a client.

사용자 입력은 여기에서 간단한 HTML 입력 양식으로 시작됩니다.



세 곳에서 시작할 수 있습니다.

클라이언트: HTML 양식에서 입력
클라이언트: 클라이언트 측 socket.io가 있는 클라이언트 측의 이벤트 리스너,
서버: 서버측 socket.io를 사용하여 메시지를 수신하고 클라이언트로 내보냅니다.

다음 예에서 "sendMessage"채널은 클라이언트에서 서버로입니다. "receiveMessage"는 서버에서 클라이언트로 전송됩니다. 서버는 클라이언트에서 sendMessage를 통해 메시지를 가져오고 receiveMessage 채널을 통해 모든 클라이언트로 다시 보냅니다.

처음에는 혼란스러워 보일 수 있지만 매우 간단합니다.

클라이언트 --> sendMesssage --> 서버
서버 <-- receiveMessage -- 서버

Client side, HTML 
 id="messages" is to display broadcasted messages. 
 id ="message-form" is to hold input-field.   

<ol id="messages"></ol>
<form action="" id="message-form">
<input type="text" name="message" id="message" placeholder="enter message">
<button>Send</button>
</form>

Client side, JS
// First entered message is emitted after button click event.  This message is sent through "sendMessage" channel.  Server side will receive message through "sendMessage" channel, then, it emits to all clients connected to the server.

$('#message-form').on('submit', function(event) {
    event.preventDefault();
    socket.emit(
        'sendMessage',
    {
        from: 'User',
        text: $('#message').val()
    },
    () => {//callback function here }
  );

// Client side event listener.  It takes new messages from the server and appends it to HTML.  
socket.on('receiveMessage', message => {
    console.log('receiveMessage -- client side', message);
    const li = $('<li></li>');
    li.text(`${message.from}: ${message.text}`);
    $('#messages').append(li);
});

Server side, JS : 
// io.on from server side listens all incoming events.   Socket.emit inside io.on emits only "receiveMessage" message to all clients connected to the server.   Socket.emit only emit to sender-client while Socket.broadcast sends to every client except the sender itself.

io.on('connection', socket => {
    console.log('New user connected -- msg from server');
    /* socket.emit does Welcome message to new chatter */
    socket.emit('newMessage', chatMessage('Chatbot', 'Welcome'));
    /* socket.braodcast.emit from Admin to new user joined. */
    socket.broadcast.emit(
        'newMessage',
        generatedMessage('Chatbot', 'New User joined')
    );
     /* socket.on listens "sendMessage" from client and io.emit sends the message out to clients */
    socket.on('sendMessage', (message) => {
    console.log('Send message -- server side', message);
    io.emit('receiveMessage', chatMessage(message.from, message.text));
    });


const chatMessage = (from, text) => {
    return {
        from,
        text,
        time: new Date().getTime()
   };
};

Mongo 또는 SQL과 같은 데이터베이스에 채팅 기록을 추가할 수 있습니다. 나중에 추가할 계획입니다.

참조…
https://stackoverflow.com/questions/32674391/io-emit-vs-socket-emit