웹소켓으로 http 에 있는 유저 메시지 보내기

250x250

관리 메뉴

😎 공부하는 징징알파카는 처음이지?

웹소켓으로 http 에 있는 유저 메시지 보내기 본문

👩‍💻 백엔드(Back-End)/Nest js

웹소켓으로 http 에 있는 유저 메시지 보내기

징징알파카 2023. 6. 6. 23:09

728x90

<본 블로그는 John Ahn 의 유튜브를 참고해서 공부하며 작성하였습니다 :-)>

=> 오늘의 테크용어 : 웹소켓이 뭐냐면

🫧 웹소켓으로 http 에 있는 유저 메시지 보내기

🌿 server.js

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

app.use("/", (req, res) => {
  res.sendFile(__dirname + "/index.html");
});

app.listen(8080);

// 웹소켓 연결
const WebSocket = require("ws");
const socket = new WebSocket.Server({
  port: 8081,
});

// 웹소켓으로 오는 유저 메시지 받기
socket.on("connection", (ws, req) => {
  ws.on("message", (msg) => {
    console.log("User Message : " + msg);
    // 웹소켓으로 서버 -> 유저 메시지 보내기
    ws.send("fighting!!");
  });
});

🌿 index.html

<!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">
    <title>웹소켓 사용하기</title>
</head>
<body>
    <h4>채팅 페이지</h4>
    <button id="send" onclick="socket.send('gani')">메시지 보내기</button>

    <script>
        // 웹소켓 열어달라고 서버에게 부탁
        let socket = new WebSocket("ws://localhost:8081");
    </script>
</body>
</html>

728x90

저작자표시

'👩‍💻 백엔드(Back-End) > Nest js' 카테고리의 다른 글

[Nest JS 로 CRUD 게시판 만들기] (22) 회원 가입 기능 구현 (0)	2023.06.07
[Nest JS 로 CRUD 게시판 만들기] (21) 인증 기능 구현을 위한 준비 (0)	2023.06.07
[Nest JS 로 CRUD 게시판 만들기] (20) 모든 게시물 가져오기 (0)	2023.06.06
[Nest JS 로 CRUD 게시판 만들기] (19) 게시물 업데이트 하기 (0)	2023.06.06
[Nest JS 로 CRUD 게시판 만들기] (18) 게시물 삭제하기 (0)	2023.06.05

'👩‍💻 백엔드(Back-End)/Nest js' Related Articles

Comments

😎 공부하는 징징알파카는 처음이지?

웹소켓으로 http 에 있는 유저 메시지 보내기 본문

웹소켓으로 http 에 있는 유저 메시지 보내기

🫧 웹소켓으로 http 에 있는 유저 메시지 보내기

'👩‍💻 백엔드(Back-End) > Nest js' 카테고리의 다른 글

티스토리툴바