-
[포스코x코딩온] 웹소켓을 활용한 간단한 채팅 기능 구현[포스코x코딩온] 웹개발자 풀스택 부트캠프8기 2023. 8. 28. 20:55728x90
웹소켓을 활용한 간단한 채팅 기능 구현
구조
같은 서버에 있으면 같은 데이터를 실시간으로 볼 수 있다.
클라이언트
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h4>채팅방에 입장하셨습니다.</h4> <ul></ul> <form id="chat"> <input type="text" id="content" placeholder="내용" /> <input type="text" id="name" placeholder="이름" /> <br /> <button>보내기</button> </form> <script> const ul = document.querySelector("ul"); const socket = new WebSocket("ws://localhost:8000"); socket.addEventListener("open", (event) => { console.log("서버에 연결되었습니다."); }); socket.addEventListener("message", (event) => { const data = JSON.parse(event.data); const li = document.createElement("li"); const h5 = document.createElement("h5"); li.textContent = `내용: ${data.content}`; h5.textContent = `이름: ${data.name}`; ul.appendChild(li); ul.appendChild(h5); }); socket.addEventListener("error", (event) => { console.log(`오류가 발생하였습니다.`, event.console.error); }); socket.addEventListener("close", (event) => { console.log("서버와 연결이 종료됨"); }); const chatForm = document.querySelector("#chat"); chatForm.addEventListener("submit", (event) => { event.preventDefault(); const content = chatForm.querySelector("#content"); const name = chatForm.querySelector("#name"); const data = { content: content.value, name: name.value }; socket.send(JSON.stringify(data)); //서버에서 받을 때는 문자열로 받아야한다.(객체로 보내면 서버에서 처리를 못할 수 있다.) //(문자열을 모든 프로그램에서 동일하다.) 그래서 JSON.stringify를 사용한다. //서버가 모두 nodejs가 아니기때문에 서버로 보내는 데이터는 문자열로 보내야 한다. content.value = ""; name.value = ""; }); </script> </body> </html>
서버
const ws = require("ws"); //websocket 불러옴.. const express = require("express"); const app = express(); const PORT = 8000; app.set("view engine", "ejs"); app.get("/", (req, res) => { res.render("index"); }); const server = app.listen(PORT, () => { console.log(`http://localhost:${PORT}`); }); //웹소켓 서버 접속 const wss = new ws.Server({ server }); //서버 연결 //브라우저(클라이언트)들을 담을 변수 선언 const sockets = []; wss.on("connection", (socket) => { //socket변수: 접속한 브라우저를 의미 console.log("클라이언트가 연결되었습니다."); //접속한 브라우저 socket을 sockets배열에 추가. sockets.push(socket); //클라이언트에서 메시지 수신 socket.on("message", (message) => { console.log(`클라이언트로부터 받은 메시지: ${message} `); //클라이언트로 응답 메시지 전송 sockets.forEach((elem) => { //실행된 모든 브라우저에 메시지를 보낸다. elem.send(`${message}`); }); }); //오류 처리 socket.on("error", (error) => { console.error("오류가 발생했습니다.", error); }); //접속 종료 socket.on("close", () => { console.log("클라이언트와 연결이 종료되었습니다."); }); });
결과
깃허브 코드
728x90'[포스코x코딩온] 웹개발자 풀스택 부트캠프8기' 카테고리의 다른 글
[포스코x코딩온] Socket.IO를 활용한 채팅 만들기(1) (0) 2023.08.29 [포스코x코딩온]Socket.IO 기본 개념 및 기본 실습 (0) 2023.08.29 [포스코x코딩온] WebSocket의 기본 (0) 2023.08.28 [포스코x코딩온] 2달이 지난 회고 (0) 2023.08.27 [포스코x코딩온] 복습을 통한 추가 내용(8주차) (0) 2023.08.26