Javascript 로 간단한 채팅 앱 만들기!

시작하며

- 채팅 어플을 구현해보고, 그 동작 원리에 대해 파헤치고 싶어서 시작하게 되었다.

- 바로 요 영상을 참고하였다. (참고:유투브) 좋은 강의 감사드립니다 _꾸벅

---

 

우선 베이스부터 시작하자.

내가 생각한 기본적인 진행 순서는 다음과 같다.

1. express 서버 실행하기

2. socket.io 생성하여 연결하기

3. 채팅 UI 만들기

---

1. express 서버 실행하기

express란?
: 웹 및 모바일 어플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 어플리케이션 프레임워크이다. 쉽게 말해  Node.js를 사용해 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체라고 한다.

 

- express 를 설치한다. (공식사이트)

npm install express --save

 

- 기본 html 문서를 만든다. (index.html로 만들었다.)

- server.js 파일을 만든다.

const express = require("express");
const app = express();
const path = require("path");

const PORT = 5000;

app.use(express.static(path.join(__dirname, "src")));

app.listen(PORT, () => {
  console.log(`server is running ${PORT}`);
});

 

* 필자는 해당 과정을 진행하다 요러한 에러가 발생했다. "require is not defined"

침착하게 package.json 파일로 이동해서 아래 속성을 입력하자. require은 commonjs 문법이기 때문이다!

혹은 package.json을 초기화하는 것도 방법이다. (npm init)

 

- 서버를 실행해본다. 

node server.js

 

- 잘 작동한다! 짝짝

 

 

2. socket.io 연결 후 실행하기

socket.io란?
: Websocket을 기반으로 실시간 웹 어플리케이션을 위한 Javascript 라이브러리, 웹 클라이언트와 서버 간 실시간 양방향 통신을 가능해주는 Node.js 모듈이다. (Websocket : tcp 기반 양방향통신을 제공하는 컴퓨터 프로토콜)

 

- socket.io 설치

npm install socket.io

 

 

- index.html 내에 스크립트를 작성한다. 위 영상에서는 socket.io 스크립트를 연결하는 2가지 방법을 제안하는데 필자는 개인적으로 방법1 이 안도어서 방법2를 택했다.

 

 

방법1

<script src="/socket.io/socket.io.js"></script>
<script type="module" src="js/chat.js"></script>

 

방법2

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.js"
  integrity="sha512-luMnTJZ7oEchNDZAtQhgjomP1eZefnl82ruTH/3Oj/Yu5qYtwL7+dVRccACS/Snp1lFXq188XFipHKYE75IaQQ=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
></script>
<script type="module" src="js/chat.js"></script>

 

* 그리고 여기서 주의할 것! socket.io 스크립트가 채팅관련 코딩을 할 chat.js 파일보다 위에 있어야 한다. 그렇지 않을 경우, io를 인식하지 못한다.. 

 

 

- 이제 socket.io를 연결한다.

const express = require("express");
const app = express();
const path = require("path");

const http = require("http");
const server = http.createServer(app);

const socketIO = require("socket.io");
const io = socketIO(server);

const PORT = 5000;

app.use(express.static(path.join(__dirname, "src")));

io.on("connection", (socket) => {
  console.log("연결됨");
});

server.listen(PORT, () => {
  console.log(`server is running ${PORT}`);
});

 

* 주의할 점! 기존에는 app.listen으로 서버를 열었으나, server.listen으로 수정해야한다. socket.io를 http에 바인딩했기 때문이다!

 

 

- 잘 연결되었다!

 

- 그렇다면 chat.js 파일을 만들어서 chat을 연결해주자! 그러면 이렇게 socket을 확인할 수 있다!

const socket = io();
console.log(socket);

 

 

- 그리고 간단하게 버튼과 input 형태가 있는 html을 만들었다.

<div class="wrapper">
  <div class="container">대화방 : <input type="text" id="nickname" /></div>
  <div class="input-container">
    <input type="text" class="chatting-input" />
    <button class="send-btn">전송</button>
  </div>
  <div class="room-container">
    <ul class="chatting-list"></ul>
  </div>
</div>

 

 

- 버튼에 클릭 이벤트리스너를 걸어 대화내용을 전송하도록 한다. 각 input.value값을 name, msg에 넣어주면 된다.

const sendBtn = document.querySelector(".send-btn");

sendBtn.addEventListener("click", () => {
  const param = {
    name: "대화자이름",
    msg: "대화내용"
  };
  socket.emit("chatting", param);
});

---

/* server.js */
io.on("connection", (socket) => {
  socket.on("chatting", (data) => {
    io.emit("chatting", data);
  });
});

 

 

- 이제 요 해당 param을 chatting-list ul태그에 붙여주면 된다!

/* chat.js */
const socket = io();
const chatList = document.querySelector(".chatting-list");

socket.on("chatting", (data) => {
  const li = document.createElement("li");

  li.textContent = `${data.name}님이 - ${data.msg}`;
  chatList.appendChild(li);
});

 

 

---

나의 결과물!

---

 

마치며..🌱

express, socket.io를 활용해 websocket 통신을 구현해보았다. 나중에 카카오톡처럼 한번 레이아웃이나 다른 기능들을 추가해서 채팅앱을 완성시켜봐야겠다. 완성시켜서 블로그에도 또 포스팅해야지~

 

 

(참고자료)

[Node.js] Express란? 

Socket.io에 대해서