메시지 전송
[WebSocket/Socket IO] 채팅 서비스 구현 8. 닉네임 설정하기
이전 포스팅인 웹소켓을 사용하여 닉네임 설정하기에서 닉네임을 설정했던 방법을 기억하시나요? 이 때의 핵심은 socket 객체 안에 새로운 키와 값을 추가해줄 수 있다는 것이었는데요. 비슷한 방식으로 Socket IO에서도 닉네임 설정 기능을 구현할 수 있습니다. 먼저, home.pug에서 닉네임을 설정하는 필드를 만들어주겠습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="styleshee..
[WebSocket/Socket IO] 채팅 서비스 구현 7. 메시지 전송 및 수신
채팅 서비스에서는 동일한 방에 참가한 사람들끼리 메시지를 주고 받을 수 있어야 합니다. 이를 어떻게 구현할 수 있을까요? 먼저, 사용자 입장에서 서비스 로직을 생각해보겠습니다. 채팅 서비스에 입장한 사용자는 가장 먼저 참여할 방을 선택(또는 입력)하고, 다음으로 해당 방에 참가한 다른 사람들과 메시지를 주고 받게 됩니다. 현재 채팅 방까지는 구현을 했죠. 이제 방에 입장한 다음 메시지를 전송하는 로직을 구현하면 됩니다. 기존의 참가 방을 보여주는 shorRoom() 함수 아래에 메시지 전송을 처리할 handleSendMessage 핸들러를 버튼에 달아줍니다. // app.js const showRoom = (userRoomName) => { room.hidden = true; chat.hidden = f..
[WebSocket/Socket IO] 채팅 서비스 구현 3. 닉네임 설정하기
채팅 서비스에서는 접속한 사용자를 닉네임을 통해 구분할 수 있어야겠죠. 이번에는 웹소켓을 사용하여 닉네임을 설정하는 방법에 대해 알아보겠습니다. 먼저, home.pug에서 닉네임을 입력받을 필드를 추가해주겠습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg.com/mvp.css") title Zoom body header h1 Ch..
