먼저 웹소켓을 열어보자.
왼쪽에 화면을 띄우고 마우스를 움직이면 콘솔에 위치를 찍는다.
// 여기는 native websocket을 사용한다.
// live servr를 extension에서 설치한다.
// client에서 live server 실행
const ws = new WebSocket('ws://localhost:7071/ws')
// 화면이 서버의 메시지를 받는다.
ws.onmessage = (websSocketMessage) => {
console.log(websSocketMessage)
console.log(websSocketMessage.data);
}
// 클라의 마우스 움직임을 서버에 보낸다.
document.body.onmousemove = (event) => {
const messageBody = {
x: event.clientX,
y: event.clientY
}
ws.send(JSON.stringify(messageBody));
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="height: 100vh;">
<script src="index.js"></script>
</body>
</html>// npm init -y로 패키지를 생성한다. server 터미널에서 실행
// 배경은 material icon theme이 제일 괜찮다.
// websocket을 사용할거라 npm install ws
// server에서 node index.js로 실행
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port : 7071 });
// 서버가 클라에 보낸다. connected를
// 그 이후에 클라가 보낸 마우스 움직임을 콘솔에 출력
wss.on('connection', (ws) => {
ws.send('connected');
ws.on('message', (messageFromClient) => {
const message = JSON.parse(messageFromClient);
console.log(message);
})
})
근데 이걸 보면 문제는 왼쪽에는 웹소켓 네이티브를 쓴는데 오른쪽은 ws 모듈을 받아 쓴다
이걸 websocket io로 해결하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul></ul>
<input placeholder="message" />
<button>Send</button>
<script src="http://cdn.socket.io/socket.io-3.0.0.js"></script>
<script src="index.js"></script>
</body>
</html>const socket = io('ws://localhost:8080');
socket.on('message', text =>{
const element = document.createElement('li');
element.innerHTML = text;
document.querySelector('ul').appendChild(element);
})
document.querySelector('button').onclick = () => {
const text = document.querySelector('input').value;
socket.emit('message', text);
}// npm install socket.io로 깔자
// npm init -y 도 한번 해주자.
const http = require('http').createServer();
// 웹소켓 서버를 생성한다. 서버는 http를 기반으로 한다.
const io = require('socket.io')(http, {
// 모든 출처에서의 요청을 허용한다는 뜻. 다른 도메인에서 이 서버에 접근 가능
cors: {origin: '*'}
})
// connection이 일어나면 실행
io.on('connection', (socket) => {
console.log('a user connected');
// 메시지가 오면 메시지를 다른 사람에게 전달한다.
// emit으로 데이터를 보낸다.
socket.on('message', (message) => {
io.emit('message', `${socket.id.substr(0,2)} said ${message}`)
})
})
const port = 8080;
http.listen(port, () =>{
console.log('8080 포트에서 서버 실행')
})
이렇게 소통이 가능하다.
'Node' 카테고리의 다른 글
| 도커에 몽고디비 설치하기 (1) | 2024.08.19 |
|---|---|
| jwt (0) | 2024.08.03 |
| 간단한 api, get, post, delete, put (0) | 2024.07.29 |
| javascript 함수 4가지 (0) | 2024.07.28 |
| express generator (0) | 2024.07.28 |
