웹소켓(Web Socket) 온라인 테스트 사이트

# 웹소켓 연결 및 데이터(메세지) 전송 테스트 사이트

- 주소 : https://www.websocket.org/echo.html

---

# 온라인 웹소켓 테스트 방법

1. 접속

- https://www.websocket.org/echo.html 주소로 접속한다.

 

2. 연결

1) Location에 연결할 WebSocket 서버의 주소를 입력

2) Connect 클릭시 연결, Disconnect 클릭시 연결 종료

3) Log 항목에 연결(Connected) 로그와 서버로 부터 받은(RECEIVED) 메시지가 출력 된다.

 

3. 데이터 전송

1) Message에 전송할 메시지 입력

2) Send 버튼 클릭시 데이터 전송

3) Log 항목에 보낸(Send) 메시지와 서버로 부터 받은(RECEIVED) 메시지가 출력 된다.

---

# 웹소켓 서버측 구현 소스(Node.js)

- 테스트를 위해 node.js환경에서 구동되는 간단한 서버측 WebSocket 소스 코드를 첨부한다.

- 웹소켓에 대한 자세한 내용은 아래 글을 참고.

Node.js: Web Socket 통신 - ws모듈 사용 방법

 

// HTTP 서버(express) 생성 및 구동
const express = require('express');
const app = express();

app.use("/", (req, res)=>{ // "/" 경로 라우팅 처리
    res.send('웹소켓서버입니다.');
})
const HTTPServer = app.listen(30001, ()=>{ //  30001 port에서 서버 구동
    console.log("Server is open at port:30001");
});


// WebSocekt 서버(ws) 생성 및 구동
const wsModule = require('ws');
const webSocketServer = new wsModule.Server(
    {
        server: HTTPServer, // WebSocket서버에 연결할 HTTP서버를 지정한다.
        // port: 30002 // WebSocket연결에 사용할 port를 지정한다(생략시, http서버와 동일한 port 공유 사용)
    }
);


// 1. connection(클라이언트 연결) 이벤트 처리
webSocketServer.on('connection', (ws, request)=>{

    // 1) 연결 클라이언트 IP 취득
    const ip = request.headers['x-forwarded-for'] || request.connection.remoteAddress;
    
    console.log(`새로운 클라이언트[${ip}] 접속`);
    
    // 2) 클라이언트에게 메시지 전송
    if(ws.readyState === ws.OPEN){ // 연결 여부 체크
        ws.send(`클라이언트[${ip}] 접속을 환영합니다 from 서버`); // 데이터 전송
    }
    
    // 3) 클라이언트로부터 메시지 수신 이벤트 처리
    ws.on('message', (msg)=>{
        console.log(`클라이언트[${ip}]에게 수신한 메시지 : ${msg}`);
        ws.send('메시지 잘 받았습니다! from 서버')
    })
    
    // 4) 에러 처러
    ws.on('error', (error)=>{
        console.log(`클라이언트[${ip}] 연결 에러발생 : ${error}`);
    })
    
    // 5) 연결 종료 이벤트 처리
    ws.on('close', ()=>{
        console.log(`클라이언트[${ip}] 웹소켓 연결 종료`);
    })
});