[#07] WebSoket Messages

2단계는 브라우저에 "Wellcome to chat"이라는 메세지를 보내보자.

목표

server

1. 브라우저 console에 연결 되었다는 "Connected to Browser" 라는 메세지를 보낸다.
2. 브라우저에 "hello" 메세지를 보낸다.
3. 브라우저에서 연결이 끊기면 "Disconnected from Browser" 라는 메세지를 보낸다.

server.js

const server = http.createServer(app);
const wss = new WebSoket.Server({ server });

wss.on('connection', (soket) => {
  console.log('Connected to Browser ✅');
  soket.on('close', () => {
    console.log('Disconnected from Browser ❌');
  });
  soket.on('message', (message) => {
    console.log(message.toString()); // browser에서 받아오는 메세지
  });
  soket.send('hello!'); // 브라우저로 보내는 메세지
});

---

browser

1. console에 서버에 연결 되었다는 "Connected to Server" 라는 메세지를 띄운다.
2. console에 서버에서 받아온 메세지를 띄운다.
3. 서버와 연결이  끊기면 "Disconnected from Server" 라는 메세지를 띄운다.

const URL = `ws://${window.location.host}`;
const aWebSocket = new WebSocket(URL); // 서버로의 연결을 뜻함

// 서버와 연결이 열리면
aWebSocket.addEventListener('open', (event) => {
  console.log('Connected to Server ✅');
});

// 메세지 수신
aWebSocket.addEventListener('message', (message) => {
  console.log('New message: ', message.data, ' from the Server'); // server로 보내는 메세지
});

// 서버와 연결이 끊기면
aWebSocket.addEventListener('close', () => {
  console.log('Disconnected from Server ❌');
});

setTimeout(() => {
  aWebSocket.send('hello from the browser!!'); // server로 전송되는 메세지
}, 2000);

---

Server 결과

browser와 연결 성공 && 브라우저에서 받아온 메세지

 

browser와 연결이 끊겼을 때

Browser 결과

 

server와 연결 성공 && 서버에서 받아온 메세지

server와 연결이 끊겼을 때