웹소켓 소개
액시오스 요청
웹 소켓을 이해하기 전에 axios 요청에 대해 조금 알아야 합니다. Axios 요청은 사용자가 브라우저에서 클라이언트로 요청하고 요청마다 응답을 다시 보낼 수 있도록 하기 때문에 훌륭합니다. 더 많은 정보를 원할 경우 페이지를 새로 고칠 필요 없이 서버에 요청하기만 하면 되기 때문에 이것은 일반적으로 훌륭합니다. 하지만 더 실시간으로 무언가를 하고 싶다면 어떻게 될까요? axios를 사용하여 실시간으로 애플리케이션이 작동하도록 하려면 현재 피드를 로드하는 버튼을 설정하거나 클라이언트 브라우저가 서버에 무한한 양의 요청을 보내도록 해야 합니다. 이 접근 방식에는 몇 가지 결함이 있습니다. 버튼 방식은 사용자 친화적이지 않으며 무한 요청으로 인해 너무 많은 문제가 발생합니다. 이것이 웹 소켓이 작동하는 곳입니다.
웹 소켓이란 무엇입니까?
Websocket은 axios와 비슷하지만 더 좋습니다. 웹 소켓이 하는 일은 클라이언트가 서버에 요청을 보낼 때 서버가 요청을 수신하고 해당 서버에 연결된 모든 클라이언트에 응답을 다시 보내는 것입니다. 이것이 웹 소켓이 실시간으로 작업할 때 이상적인 구현으로 간주되는 이유입니다.
구현
웹 소켓을 구현하는 데 사용할 수 있는 다양한 API가 있지만 오늘은 Socket.IO 구현에 대해서만 이야기하겠습니다. 이 API에 대한 문서로 이동하려면 여기 링크가 있습니다: https://socket.io/docs/v3/index.html . 더 이상 고민하지 않고 구현에 대해 이야기할 수 있습니다. 먼저 socket.io와 http를 설치한 다음 서버 페이지에서 가져와야 합니다. 그런 다음 const server = http.createServer(app);를 추가해야 합니다. 그리고
const io = socketio(서버); 귀하의 서버 페이지에. 그런 다음 app.listen을 server.listen으로 변경해야 합니다. 이제 페이지 중간 어딘가에 추가할 수 있습니다.
io.on('연결', (소켓) => {
socket.on('전송', () => {
io.emit('수신');
});
}); 이것이하는 일은 사용자가 서버에 연결할 때 io.on 연결이 발생하고 사용자 브라우저가 sended를 내보낼 때 서버가 그것을 받고 모든 클라이언트 브라우저에 'received'를 내보냅니다. 다음은 서버 페이지의 모습입니다.
const express = require('express');
const path = require('path');
const http = require('http')
const socketio = require('socket.io')
const app = express();
app.use(express.json());
const server = http.createServer(app);
const io = socketio(sever)
const DIST_DIR = path.join(__dirname, '../client', 'dist');
app.use(express.static(DIST_DIR))
io.on(‘connection’, (socket) => {
socket.on(‘sent’, () => {
io.emit(‘received’);
})
});
server.listen(5000, function() {
console.log('listen on: http://localhost:5000')
});
그런 다음 프런트 엔드에 const socket = io();를 추가합니다. 그런 다음 클릭하면 전송되는 버튼을 설정합니다. socket.emit('전송');
socket.on('수신', () => {
console.log('안녕하세요')
});
이것이 하는 일은 서버가 'received'를 내보내면 이 함수를 호출하는 것입니다.
다음은 코드의 모양입니다.
Const socket = io();
Const app = () => {
socket.on(‘received’, () => {
console.log(‘hello’);
});
Return (
<div>
<button onClick={() => socket.emit(‘sent’)}>click</button>
</div>
)
}
마지막으로 index.html에 스크립트 태그를 추가해야 하며 이 ** **와 같아야 하며 파일은 다음과 같아야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>live</title>
</head>
<body>
<div id="root"></div>
<script src="/socket.io/socket.io.js"></script>
<script src="bundle.js"></script>
</body>
</html>
결론
이제 서버를 시작하고 두 개의 탭을 연 다음 한 탭에서 버튼을 클릭하고 다른 탭에서 콘솔 hello에 로그인해야 하며 그 반대의 경우도 마찬가지입니다. 궁극적으로 이 패턴을 사용하여 라이브 데이터를 구현합니다.
Reference
이 문제에 관하여(웹소켓 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/billygoat12/intro-into-websocket-1872
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Websocket은 axios와 비슷하지만 더 좋습니다. 웹 소켓이 하는 일은 클라이언트가 서버에 요청을 보낼 때 서버가 요청을 수신하고 해당 서버에 연결된 모든 클라이언트에 응답을 다시 보내는 것입니다. 이것이 웹 소켓이 실시간으로 작업할 때 이상적인 구현으로 간주되는 이유입니다.
구현
웹 소켓을 구현하는 데 사용할 수 있는 다양한 API가 있지만 오늘은 Socket.IO 구현에 대해서만 이야기하겠습니다. 이 API에 대한 문서로 이동하려면 여기 링크가 있습니다: https://socket.io/docs/v3/index.html . 더 이상 고민하지 않고 구현에 대해 이야기할 수 있습니다. 먼저 socket.io와 http를 설치한 다음 서버 페이지에서 가져와야 합니다. 그런 다음 const server = http.createServer(app);를 추가해야 합니다. 그리고
const io = socketio(서버); 귀하의 서버 페이지에. 그런 다음 app.listen을 server.listen으로 변경해야 합니다. 이제 페이지 중간 어딘가에 추가할 수 있습니다.
io.on('연결', (소켓) => {
socket.on('전송', () => {
io.emit('수신');
});
}); 이것이하는 일은 사용자가 서버에 연결할 때 io.on 연결이 발생하고 사용자 브라우저가 sended를 내보낼 때 서버가 그것을 받고 모든 클라이언트 브라우저에 'received'를 내보냅니다. 다음은 서버 페이지의 모습입니다.
const express = require('express');
const path = require('path');
const http = require('http')
const socketio = require('socket.io')
const app = express();
app.use(express.json());
const server = http.createServer(app);
const io = socketio(sever)
const DIST_DIR = path.join(__dirname, '../client', 'dist');
app.use(express.static(DIST_DIR))
io.on(‘connection’, (socket) => {
socket.on(‘sent’, () => {
io.emit(‘received’);
})
});
server.listen(5000, function() {
console.log('listen on: http://localhost:5000')
});
그런 다음 프런트 엔드에 const socket = io();를 추가합니다. 그런 다음 클릭하면 전송되는 버튼을 설정합니다. socket.emit('전송');
socket.on('수신', () => {
console.log('안녕하세요')
});
이것이 하는 일은 서버가 'received'를 내보내면 이 함수를 호출하는 것입니다.
다음은 코드의 모양입니다.
Const socket = io();
Const app = () => {
socket.on(‘received’, () => {
console.log(‘hello’);
});
Return (
<div>
<button onClick={() => socket.emit(‘sent’)}>click</button>
</div>
)
}
마지막으로 index.html에 스크립트 태그를 추가해야 하며 이 ** **와 같아야 하며 파일은 다음과 같아야 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>live</title>
</head>
<body>
<div id="root"></div>
<script src="/socket.io/socket.io.js"></script>
<script src="bundle.js"></script>
</body>
</html>
결론
이제 서버를 시작하고 두 개의 탭을 연 다음 한 탭에서 버튼을 클릭하고 다른 탭에서 콘솔 hello에 로그인해야 하며 그 반대의 경우도 마찬가지입니다. 궁극적으로 이 패턴을 사용하여 라이브 데이터를 구현합니다.
Reference
이 문제에 관하여(웹소켓 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/billygoat12/intro-into-websocket-1872
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
const express = require('express');
const path = require('path');
const http = require('http')
const socketio = require('socket.io')
const app = express();
app.use(express.json());
const server = http.createServer(app);
const io = socketio(sever)
const DIST_DIR = path.join(__dirname, '../client', 'dist');
app.use(express.static(DIST_DIR))
io.on(‘connection’, (socket) => {
socket.on(‘sent’, () => {
io.emit(‘received’);
})
});
server.listen(5000, function() {
console.log('listen on: http://localhost:5000')
});
Const socket = io();
Const app = () => {
socket.on(‘received’, () => {
console.log(‘hello’);
});
Return (
<div>
<button onClick={() => socket.emit(‘sent’)}>click</button>
</div>
)
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>live</title>
</head>
<body>
<div id="root"></div>
<script src="/socket.io/socket.io.js"></script>
<script src="bundle.js"></script>
</body>
</html>
이제 서버를 시작하고 두 개의 탭을 연 다음 한 탭에서 버튼을 클릭하고 다른 탭에서 콘솔 hello에 로그인해야 하며 그 반대의 경우도 마찬가지입니다. 궁극적으로 이 패턴을 사용하여 라이브 데이터를 구현합니다.
Reference
이 문제에 관하여(웹소켓 소개), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/billygoat12/intro-into-websocket-1872텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
