'node js' 122건

이제 서버의 socket.js에 웹 소켓 이벤트를 연결합니다. websocket.jsconst SocketIO = require("socket.io");module.exports = (server, app) => { const io = SocketIO(server, { path: "/socket.io" }); app.set("io", io); // ❶ const room = io.of("/room"); // ❷ const chat = io.of("/chat"); room.on("connection", (socket) => { // ❸ console.log("room 네임스페이스에 접속"); socket.on("disconnect", () => { console.log("..

채팅방 생성 화면을 담당하는 room.html 파일을 작성합니다.{% extends 'layout.html' %} {% block content %} 채팅방 생성 생성 {% endblock %} 채팅방 화면을 담당하는 chat.html 파일을 작성합니다.{% extends 'layout.html' %} {% block content %}{{title}}방 나가기 채팅 내용 {% for chat in chats %} {% if chat.user === user %} {{chat.user}} {% if chat.gif %} {% else %} ..

채팅 웹 메인 화면과 채팅방 등록 화면을 만들어보겠습니다. 채팅뿐만 아니라 채팅방도 실시간으로 추가되거나 제거됩니다.화면의 레이아웃을 담당하는 layout.html 파일을 작성하고 views/error.html을 수정합니다. views/layout.html {% block content %} {% endblock %} {% blockscript %} {% endblock %} views/error.html{% extends 'layout.html' %}{% block content %} {{message}} {{error.status}} {{error.stack}}{% endblock %} main.css를 추가하여 간단히 디자인합니다. public/m..

사람들이 익명으로 생성하고 자유롭게 참여하면서 GIF 파일을 올릴 수 있는 채팅방을 만들어보겠습니다.몽고디비와 몽고디비 ODM인 몽구스를 사용할 것입니다. 몽구스를 설치한 후, 몽구스 스키마를 생성하겠습니다. 채팅방 스크마와 채팅 내역 스키마만 있으면 됩니다. 사용자는 익명이니 딱히 저장할 필요가 없습니다. 사용자의 이름은 랜덤 색상으로 구별하겠습니다.먼저 필요한 모듈을 설치합니다. 이미지를 업로드하고 서버에 HTTP 요청을 할 것이므로 multer와 axios를 같이 설치합니다. color-hash 모듈은 조금 전에 언급했던 랜덤 색상을 구현해주는 모듈입니다.$ npm i mongoose multer axios color-hash 먼저 채팅방 스키마를 만들어보겠습니다. schemas/room.jsco..

이전 절의 ws 패키지는 간단하게 웹 소켓을 사용하고자 할 때 좋습니다. 하지만 구현하려는 서비스가 좀 더 복잡해진다면 Socket.IO를 사용하는 것이 편합니다. Socket.IO가 할 수 있는 일을 ws 패키지가 못한다는 뜻은 아닙니다. Socket.IO에 편의 기능이 많이 추가되어 있다는 뜻입니다.먼저 Socket.IO를 설치합니다.$ npm i socket.io@2 그리고 ws 패키지 대신 Socket.IO를 연결합니다. socket.jsconst SocketIO = require("socket.io");module.exports = (server) => { const io = SocketIO(server, { path: "/socket.io" }); io.on("connection", (so..

연결 후에는 웹 소켓 서버(wss)에 이벤트 리스너를 붙입니다. 웹 소켓은 이벤트 기반으로 작동한다고 생각하면 됩니다. 실시간으로 데이터를 전달받으므로 항상 대기하고 있어야 합니다. connection 이벤트는 클라이언트가 서버와 웹 소켓 연결을 맺었을 때 발생합니다. req.headers['x-forwarded-for'] || req.connection.remoteAddress는 클라이언트의 IP를 알아내는 유명한 방법 중 하나이므로 알아두는 게 좋습니다. 익스프레스에서는 IP를 확인할 때, proxy-addr 패키지를 사용하므로 이 패키지를 사용해도 괜찮습니다. 로컬 호스트로 접속할 경우, 크롬에서는 IP가 ::1로 뜹니다. 다른 브라우저에서는 ::1 외의 다른 IP가 뜰 수 있습니다. 익스프레스 서..

먼저 gif-chat이라는 새로운 프로젝트를 만듭니다.{ "name": "gif-chat", "version": "0.0.1", "description": "GIF 웹소켓 채팅방", "main": "app.js", "scripts": { "start": "nodemon app" }, "author": "Zero Cho", "license": "ISC", "dependencies": { "cookie-parser": "^1.4.4", "dotenv": "^8.2.0", "express": "^4.17.1", "express-session": "^1.17.0", "morgan": "^1.9.1", "nunjucks": "^3.2.0", "ws": "..

노드 생태계에서는 웹 소캣이란 말을 들으면 Socket.IO를 먼저 떠올리는 경우가 많습니다. 하지만 Socket.IO는 웹 소켓을 활용한 라이브러리일 뿐이며 웹 소켓 그 자체는 아닙니다. 나중에 Socket.IO를 사용하기 위해서는 기반 기술인 웹 소켓에 대해 먼저 알아야 합니다. 웹 소켓은 HTML5에 새로 추가된 스펙으로 실시간 양방향 데이터 전송을 위한 기술이며, HTTP와 다른 WS라는 프로토콜을 사용합니다. 따라서 브라우저와 서버가 WS 프로토콜을 지원하면 사용할 수 있습니다. 최신 브라우저는 대부분 웹 소켓을 지원하고, 노드에서는 ws나 Socket.IO 같은 패키지를 통해 웹 소켓을 사용할 수 있습니다. 웹 소켓이 나오기 이전에는 HTTP 기술을 사용하여 실시간 데이터 전송을 구현했습니다...

유닛 테스트를 작성하다 보면, 전체 코드 중에서 어떤 부분이 테스트되고 어떤 부분이 테스트되지 않는지 궁금합니다. 어떤 부분이 테스트되지 않는지를 알아야 나중에 그 부분의 테스트 코드를 작성할 수 있습니다. 전체 코드 중에서 테스트되고 있는 코드의 비율과 테스트되고 있지 않은 코드의 위치를 알려주는 jest의 기능이 있습니다. 바로 커버리지(coverage) 기능입니다.커버리지 기능을 사용하기 위해 package.json에 jest 설정을 입력합니다.{ "name": "nodebird", "version": "0.0.1", "description": "익스프레스로 만드는 SNS 서비스", "main": "app.js", "scripts": { "start": "nodemon app", ..

jest에서는 모듈도 모킹할 수 있습ㅂ니다. jest.mock 메서드를 사용합니다.jest.mock("../models/user");const User = require("../models/user");const { addFollowing } = require("./user");describe("addFollowing", () => { const req = { user: { id: 1 }, params: { id: 2 }, }; const res = { status: jest.fn(() => res), send: jest.fn(), }; const next = jest.fn(); test("사용자를 찾아 팔로잉을 추가하고 success를 응답해야 함", async () =..

isNotLoggedIn 부분도 마저 작성하겠습니다.const { isLoggedIn, isNotLoggedIn } = require("./middlewares");describe("isLoggedIn", () => { const res = { status: jest.fn(() => res), send: jest.fn(), }; const next = jest.fn(); test("로그인 되어있으면 isLoggedIn이 next를 호출해야 함", () => { const req = { isAuthenticated: jest.fn(() => true), }; isLoggedIn(req, res, next); expect(next).toBeCalledTimes..

이제 실제 Nodebird의 코드를 테스트해봅시다. middlewares.js에 있는 isLoggedIn과 isNotLoggedIn 함수를 테스트해보겠습니다.routes/middlewares.test.jsconst { isLoggedIn, isNotLoggedIn } = require("./middlewares");describe("isLoggedIn", () => { test("로그인되어 있으면 isLoggedIn이 next를 호출해야 함", () => {}); test("로그인되어 있지 않으면 isNotLoggedIn이 에러를 응답해야 함", () => {});});describe("isNotLoggedIn", () => { test("로그인되어 있으면 isNotLoggedIn이 에러를 응답해야..