4. 웹소켓으로 클라이언트와 서버 간 메시지 주고받기

사실 이제 그냥,

이벤트가 일어났을 때 어떻게 할지만 추가시켜주면 되는 부분이다.

 

wss.on("connection", (socket)=>{

  console.log("Connected to Client");

  socket.send("hello!");

});

서버쪽은 그냥 연결이 되었을 떄,

소켓을 통해 hello라는 메시지를 보내도록 했다.

소켓은 연결에 관한 정보, 연결된 상대, 연결을 통해 할수 있는 일 들을 모아놓은 객체이다.

 

const socket = new WebSocket("ws://localhost:3000");

socket.addEventListener("message", (m)=>{

  console.log(m.data);

});

socket.addEventListener("open", ()=>{

  console.log("Connected to Server");

});

socket.addEventListener("close", ()=>{

  console.log("Disconnected from Server");

});

클라이언트의 app.js다

먼저, 소켓에 이벤트들을 등록해 주었다.

open은 소켓이 열렸을 때, 말 그대로 서버의 소켓과 연결이 되었을 때,

 

close는 소켓이 닫혔을 때, 서버쪽에서 소켓연결을 차단했을 때 (꺼져도 소켓이 꺼지니 클라이언트 쪽에서 열 수가 없음)

 

message는 메시지를 받았을 때 이다.

메시지를 받았을 때 m을 출력하도록 했는데,

정확히 말하자면 message가 아니라 messageEvent이다.

메시지 뿐만 아니라 메시지가 어디서 왔는지 등이나 메시지에 대한 여러 정보를 담고 있다.

 

그래서, 그 객체의 m.data가 정확히 서버가 보낸 데이터가 된다.

 

 

 

 

이번엔, 클라이언트 쪽에서도 메시지를 보내서 서버에서 읽을 수 있게 해 보겠다.

wss.on("connection", (socket)=>{

  console.log("Connected to Client");

  socket.send("hello!");

  socket.on("message", (m)=>{console.log(m.toString('utf-8'))});

  socket.on("close", (m)=>{console.log("Disconnected socket");});

});

이렇게, 여기 커넥션 됐을 때 저기다가 소켓에다가 이벤트 다 등록 시켜주면 된다.

오 그럼 이거 socket이 연결된 사람에 대한 정보도 가지고 있으니 사람별로 구분해서 if문이나 switch문으로 구분해서 사람마다 다르게 이벤트 줘도 될 듯.

 

여튼, 서버쪽에서는 on으로 이벤트 등록을 한다.

이게, 조금 차이는 있긴 있다. 

https://m.blog.naver.com/brane7/220840043915

Event 중 on 과 addEventListener 차이

근데 뭐 그것보다는, server쪽에서는 on을 쓰고 클라이언트 쪽에서는 addEventListener를 써야 구분이 되니까 그런 것 같다. 둘다 뭘 쓰든지 상관은 없다.

 

여튼, message 해서 메시지 받았을 때 이벤트를 추가했다.

근데 또 달랐다. 이번에는 서버에 객체로 오는 그런 게 아니라, 보낸 데이터가 버퍼데이터로 왔다.

그래서 toString('utf-8') 해줘서 문자열로, utf-8 옵션으로 변환을 해 줬다.

 

객체로 오지 않고, 아예 내가 보낸 데이터 그대로 왔다.

그런데 버퍼로 왔다.

 

여튼, 커넥션 되었을 때,

그 때 socket으로 이벤트를 추가해 준다. 

 

wss.on("connection", (socket)=>{

  console.log("Connected to Client");

  socket.send("hello!");

  socket.on("message", (m)=>{console.log(m.toString('utf-8'))});

  socket.on("close", (m)=>{console.log("Disconnected socket");});

});

서버 쪽은 연결되었을 때 행동을 이렇게 정의 하면 된다.

저 커넥션 안쪽에.