web socket

웹소켓(Web Socket)

 

 ws프로토콜을 이용하는 양방향 통신방식이다.

 ws프로토콜은 한번 연결되면 연결을 끊지 않고 계속 유지한 상태로 클라이언트와 서버가 서로 데이터를 주고 받는다

 

 따라서 서버 하나에 여러 클라이언트가 붙어서 지속적으로 데이터를 주고 받아야하는 서비스에 유용하다.

: HTTP 통신의 경우, 클라이언트가 요청을 하고 서버가 응답을 하면 바로 연결이 끊어진다.

 

1. ws 모듈이란?

 간단한 웹소켓 통신을 구현하기 위한 모듈이다.

 

2. ws사용 방법

- 서버측 WebSocket과 클라이언트측 WebSocket이 통신을 하는 구조다.

 

- 서버측 WebSocket은 node.js환경에서 ws모듈을 통해 생성해 준다.

 

- 클라이언트측 WebSocket은 브라우저 환경에서 지원되는 WebSocket객체를 생성해 준다.

 

- 서버측 WebSocket 생성시, HTTP서버를 연결해주면 PORT를 공유하며 작동을 시작한다.

 

- 클라이언트측 WebSocket 생성시, 접속할 WebSocket서버 주소를 연결해주면 통신을 시작한다.

 

- 기본적인 연결 상태 체크와 데이터 송수신은 이벤트 기반으로 동작된다.

 

- 서버/클라이언트 연결시 connection이벤트가 발생하며, 데이터를 주고 받을 때마다 message이벤트가 발생한다.

 

-서버에서는 ws 설치가 필요하지만 ,클라이언트에서는 브라우저에서 지원된다.

 

-

 

 

 

작업 순서는 아래와 같다.

1) ws 모듈 설치 ( 콘솔 명령어:  npm install ws )

2) HTTP서버 생성(Express 모듈 등 활용)

3) WebSocket 서버 생성(HTTP서버 연결)

4) 클라이언트(브라우저)에서 WebSocket 객체 생성(연결)

5) 서버-클라이언트간 데이터 통신 수행(이벤트 기반)

 

 

2),3) HTTP서버 생성(Express 모듈 등 활용) , WebSocket 서버 생성(HTTP서버 연결)

import path from 'path';
import express from "express";
const __dirname = path.resolve();
const app = express();
import http from "http";
import WebSocket, { WebSocketServer } from 'ws';


//pug 페이지 렌더링 하기위해 pug설정
app.set("view engine" , "pug");
app.set("views", __dirname + "/views");

app.get("/" , (req,res)=> res.render("home"));
app.get("/*", (req,res)=> res.redirect("/"));
app.use("/public" ,express.static(__dirname+"/public"));

const handleListen  = ()=> {console.log("hello")}


const server = http.createServer(app);//nodejs에 내장되어있는 http package , http 서버
const wsserver = new WebSocketServer({server}) //http,websocket서버 둘다 가동가능: http 서버위에 websocket서버 만들기

server.listen(3000 , handleListen)//localhost는 동일한 port에서 hhtp,ws request 둘다 처리가능

 

 

 

 

 

 

4)클라이언트(브라우저)에서 WebSocket 객체 생성(연결)

doctype html

html(lang="en")

    head

        meta(charset="UTF-8")

    body         
        header 
           h1 ZOOM
        main

           ul  
           form
                input(type="text",placeholder="write message" , reqired)
                button 전송
        script(src="/public/js/app.js")

const messageList = document.querySelector("ul")
const messageForm = document.querySelector("form")


//클라이언트에서 websocket객체생성 : server와 client 연결
//(window.location.host: 여기서는 localhost:3000)
var clientSocket = new WebSocket(`ws://${window.location.host}`); 


//socket이 connection을 open했을때 발생
clientSocket.addEventListener("open" , ()=> {console.log("connected to server")})


//서버로부터 메시지받는 이벤트
clientSocket.addEventListener("message" , (message)=> { 
    const li = document.createElement("li")
    li.innerText = message.data
    messageList.append(li)
})


)//서버와 연결을 끊는 이벤트
clientSocket.addEventListener("close" , ()=> {console.log("not connected to server")}

//메시시폼(서버로 메시지 보내기)
messageForm.addEventListener("submit" , (event) => {
    event.preventDefault()
    const input = messageForm.querySelector("input") 
    clientSocket.send(input.value)  //서버로 부터 메시지 보내기
    input.value = ""
})

 

 

 

 

 

5)서버-클라이언트간 데이터 통신 수행(이벤트 기반)

//websocket

const server = http.createServer(app); //http 서버
const wsserver = new WebSocketServer({server}) //websocket서버 생성
//http,websocket서버 둘다 가동가능: 
//http 서버위에 websocket서버 만들기(굳이 둘다 돌려줄 필요는없음)



//서버와 클라이언트연결
 //serverSocket은 새브라우저가 들어올떄마다 실행됨
const sockets = []; //connection된 browser들

wsserver.on("connection",(serverSocket)=>{
    sockets.push(serverSocket) //연결된 소켓들

    serverSocket["nickname"] = "Anonymous" //닉네임 설정안한경우

    serverSocket.on("message", (message) => { //브라우저에 보낸 메시지 받기 

        const msg = JSON.parse(message) //string -> object 변환후  message해석

        if (msg.type === "new_message") { 
            sockets.forEach(asocket => {  //브라우저에 메시지 보내기
                asocket.send(`${serverSocket.nickname} : ${msg.payload}`)
            })
        }
        else if(msg.type === "nickname"){
            console.log(msg.payload)
            serverSocket["nickname"] = msg.payload
        }
    })
    serverSocket.on("close", () => console.log("not connected to browser")) //브라우저로부터 연결 끊김 
})


server.listen(3000 , ()=> {console.log("http,ws:listening")})//localhost는 동일한 port에서 http,ws,socket.io request 둘다 처리가능
// http 서버에 접근

 

 

 

 

 

 

 

 

 

 

 

참고: WebSocket() - Web API | MDN (mozilla.org)

WebSocket() - Web API | MDN

참고:ws - npm (npmjs.com)

ws

참고:웹소켓 (javascript.info)

웹소켓