[JavaScript] WebSocket | 서버와 브라우저 연결

1. express 로 서버 구축

• express ?
  • node.js의 프레임워크
  • 서버 사이드 프레임워크로 Node.js의 API를 단순화하고, 쉽게 서버 구축 가능
• express application으로부터 http server 생성

import express from 'express';
import http from 'http';

const app = express();
const server = http.createServer(app);

 

 

2. http 서버 위에, webSocket 서버 구축 -> 같은 포트 이용

import ws from 'ws';

//http 서버 전달
const wss = new we.WebSocketServer({ server });

 

 

3. WebSocket Connection :  서버 -> 브라우저 연결

• socket.on()  : socket으로부터 온 정보 제공

wss.on('connection', socket => {
  console.log('Connected to Browser ✅');
  socket.on('close', () => console.log('Disconnected from the Browser ❌'))
  
  socket.on('message', message => {
    console.log(message.toString('utf8'));
  });
  socket.send('Hello!');
});

 

 

4. WebSocket Connection :  브라우저 -> 서버 연결

• socket.addEventListener()

//app.js

const socket = new WebSocket(`ws://${window.location.host}`);

socket.addEventListener('open', () => {
  console.log('Connected to Server ✅');
});

socket.addEventListener('message', message => {
  console.log('Just got this: ', message.data, ' from the server');
});

socket.addEventListener('close', () => {
  console.log('Disconnected from Server ❌');
});

setTimeout(() => {
  socket.send('Hello from the Browser!');
}, 10000);

 

 

5. connection 확인

• server

• browser