<정의>
web 통신의 기본은 http로, 서버와 client 가 http 라는 카톡을 서로 주고 받았다.
이 소통의 한계는 server가 절대 선톡(먼저 연락)을 안 한다는 것.
server 의 상황이나 근황을 알려면 반드시 client가 먼저 선톡해야 한다.
게임이나 주식 단타를 하는 중일 때 client 가 가만히 있어도 server에서 지속적으로 연락받는 방법이 바로 Web Socket.
<예제 코드>
먼저 vscode colsole 에 다음을 install 한다.
npm install express (서버 형성 라이브러리)
npm install ws (웹소켓 연결 라이브러리)
[server.js]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
// server 연결
const express = require('express');
const app = express();
app.use("/", function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(8080);
// web socket 연결
const WebSocket = require('ws');
const socket = new WebSocket.Server({
port: 8081
});
// web socket에서 오는 통신 수신
socket.on('connection', (ws, req) => {
ws.on('message', (msg) => {
console.log('유저가 보낸 것 : ' + msg);
// server to user
ws.send('Hey ya');
})
})
/*ws 대신 socket.io 라이브러리를 사용 가능
- 연결이 끊기면 자동 재접속 기능
- 모든 socket user에게 전체 msg 전송 가능
- websocket room 생성 가능
*/
|
cs |
[index.html]
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h4>Chat Page</h4>
<!-- 버튼 클릭시 서버에 전송-->
<button id="send" onclick="socket.send('Hi there, pal')">Send MSG</button>
<!-- server에 websocket 요청-->
<script>
let socket = new WebSocket("ws://localhost:8081")
</script>
</body>
</html>
|
cs |
<참조>
https://www.youtube.com/watch?v=yXPCg5eupGM
'JavaScript' 카테고리의 다른 글
| [JavaScript] Input에 null 값 막기 (0) | 2023.02.05 |
|---|---|
| [JavaScript] 호이스팅(Hoisting) (0) | 2022.07.08 |
| [JavaScript] Callback Function (콜백 함수) (0) | 2022.05.28 |
| [JavaScript] var 가 아닌 let, const 만 쓸 이유? (0) | 2022.05.21 |
댓글