프로젝트 배경 소개
최근에 내가 작성한 프로젝트에는 소셜 모듈이 있으며 기능을 구현해야합니다. 사용자를 좋아하고 댓글을 달고 다음 등이 발생하면 서버가 실시간으로 사용자에게 메시지를 푸시해야합니다. 최종 프로젝트 주소는 https://github.com/noiron/socket-message-push입니다. 여기서 구현 아이디어와 일부 코드를 소개합니다.
프로젝트 프로세스에는 몇 가지 객체가 있습니다.
이벤트 처리 프로세스는 다음과 같습니다.
메시지 푸시 서버는 메시지를 특정 사용자에게 푸시 할 수 있도록 현재 온라인 사용자의 정보를 기록해야한다고 생각하십시오. 따라서 사용자가 로그인하면 자신의 사용자 정보를 Node.js 서버로 보내야합니다. 이 양방향 실시간 메시징을 달성하기 위해 WebSocket이 구현되는 것이 분명합니다. 메시지 푸시 서버에서 node.js를 사용하기 때문에 매우 편리한 옵션이 있습니다 : socket.io.
socket.io 소개
Socket.io는 JavaScript에서 구현 된 실시간 양방향 통신 라이브러리입니다. 기능을 구현하는 데 사용하기 쉽습니다.
socket.io에는 두 부분이 포함되어 있습니다.
Socket.io의 기본 사용을 제공하는 다음 예제 코드 코드를 살펴볼 수 있습니다.
io.on ( 'Connection', function (socket) {socket.emit ( 'request', / * * /); // 소켓에 이벤트를 방출 io.emit ( 'broadcast', / * * /); // 이벤트를 모든 연결된 소켓 소켓에 방출합니다 ( 'reply', function () { / * /});Socket.io에 대해 주목해야 할 또 다른 사항이 있습니다. SECKE.IO는 전적으로 WebSocket의 구현이 아닙니다.
참고 : Socket.io는 WebSocket 구현이 아닙니다. Socket.io는 실제로 WebSocket을 가능한 경우 전송으로 사용하지만 메시지 승인이 필요한 경우 패킷 유형, 네임 스페이스 및 ACK ID 등 각 패킷에 메타 데이터를 추가합니다.
다음으로 Express.js를 사용하여 서버 측 프로그램을 설정하고 socket.io를 소개해야합니다.
node.js 서버 구성
Express.js를 사용하여 기본 서버를 작성하십시오
Express.js를 사용하여 Node.js 메시지 푸시 서버를 작성하고 먼저 간단한 예제를 사용하여 기능을 찾아 보았습니다.
// server.jsconst expression = require ( 'express'); const app = express (); const path = require ( 'path'); const http = require ( 'http'). server (app); const port = 4001; appress.static (path.join (__ dirname, 'public')); app.get (res) {res) + '/public/index.html'; }); app.get('/api ', function (req, res) {res.sendfile (__ dirname +'/public/index.html '); amp.get ('/api ', function (req, res) {resend ('); {console.log (`포트의 청취 : $ {port}`);});위의 코드를 Server.js로 저장하고 새 공개 폴더를 작성하고 index.html 파일을 넣으십시오. 다음 명령을 실행하십시오.
node server.js
이제 LocalHost : 4001에서 효과를 볼 수 있습니다.
socket.io 소개
기본 Express 서버가 있으므로 다음에 Socket.io를 추가해야합니다.
const io = require ( 'socket.io') (http); io.on ( 'connection', function (socket) {console.log ( '사용자 연결'); socket.broadcast.emit ( 'new_user', {});}여기서 IO는 연결 이벤트에 듣습니다. 클라이언트가 서버와 연결을 설정하면 여기에서 콜백 함수가 호출됩니다 (클라이언트의 코드는 다음 섹션에서 소개됩니다).
함수의 매개 변수 소켓은 현재 클라이언트와 서버간에 설정된 연결을 나타냅니다. 아래 그림과 같이 클라이언트 프로그램에서 확립 된 소켓 연결을 인쇄 할 수 있습니다.
ID 속성은 서버가 특정 사용자에게 메시지를 보낼 수 있도록이 연결을 식별하는 데 사용될 수 있습니다.
socket.broadcast.emit ( 'new_user', {});이 코드 라인은 소켓이 현재 서버와 연결되는 모든 클라이언트에 New_User라는 메시지를 방송한다는 것을 의미합니다 (제외).
백엔드 푸시 메시지의 처리 프로세스
사용자 정보 처리
편의를 위해서는 하나의 배열 만 사용하여 사용자 정보를 저장하며 실제 작업에서 필요에 따라 데이터베이스에 넣을 수 있습니다.
Global.users = []; // 로그인 한 사용자의 Tokenid, SocketID를 기록합니다
사용자가 로그인하면 클라이언트는 user_login 이벤트를 서버로 보냅니다. 서버가 수신 한 후에는 다음을 수행합니다.
socket.on ( 'user_login', function (info) {const {tokenid, userId, socketId} = info; addSocketID (user, {tokenid, socketId, userId});});addSocketId ()는 사용자 배열에 사용자 정보를 추가합니다. 다른 사용자는 Tokenid를 통해이를 구별 할 수 있습니다. 각 사용자는 socketids 어레이가있어 존재할 수있는 여러 socketids를 저장합니다. 이 기능의 특정 코드는 SRC/UTILS.JS 파일에서 찾을 수 있습니다.
마찬가지로, 사용자 정보를 삭제하는 데 사용되는 deletesocketid () 함수도 있으며 동일한 파일에서 코드를 볼 수 있습니다.
사용자의 토큰 니드를 얻은 후에는 해당 SocketID를 찾은 다음 특정 사용자에게 메시지를 푸시해야합니다.
// id = socketId io.sockets.to (socketId) .emit ( 'leage_message', {entityType, data})와의 연결로만 메시지를 보냅니다.서버의 아이디어는 거의 이와 같습니다. 다음으로 클라이언트에서 이에 따라 처리하는 방법을 소개하겠습니다.
고객
socket.io의 초기화
먼저 HTML 파일에서 CDN을 통해 Socket.io의 클라이언트 측 파일을 소개합니다.
<script src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"> </script>
소개하는 다른 방법 :
<script src = "/socket.io/socket.io.js"></script> const io = require ( 'socket.io-client'); // inmote syntaximport io에서 'socket.io-client';
Socket.io를 도입 한 후 IO 함수가 얻어지며 메시지 푸시 서버와 연결하는 데 사용됩니다.
// 노드 서버를 배포 한 후 주소가 : https://www.example.com/ws// 다음 : ws_host = 'https : //www.example.const msgsocket = io ('$ {ws_host}`, {secure : true, path : '/ws/socket.io'};로컬로 듣는 경우 :
const msgsocket = io ( 'http : // localhost : 4001');
여기에서 io ( 'https://www.example.com/ws')로 작성하면 오류가 발생하고/ws는 경로에 기록되어야합니다.
다른 파일 에서이 변수를 사용할 수 있으려면 MSGSocket은 글로벌 변수로 사용할 수 있습니다.
Window.msgsocket = msgsocket;
사용자는 연결을 설정합니다
// 사용자가 로그인하면 사용자 정보를 서버로 보냅니다. 서버는 메시지를 수신 한 후 사용자와 소켓 매핑을 만듭니다. msgsocket.emit ( 'user_login', {userid, socketid : msgsocket.id, tokenid});푸시 된 메시지를 수신 한 후 처리
// webSocket 연결이 설정된 후 recept_message msgsocket.on ( 'lec
WebSocket 서버가 클라이언트에게 메시지를 푸시하면 클라이언트는 lecce_message 이벤트를 듣고 수신 된 매개 변수에는 해당 보류 정보가 포함되어 있습니다.
Redux는 데이터 처리에 사용되므로 New_Socket_MSG 작업이 여기에서 발송되고 후속 일상적인 Redux 처리 흐름이 제공됩니다.
프로젝트 사용
GitHub의 프로젝트 주소 : https://github.com/noiron/socket-message-push
npm run dev
개발 환경에서 테스트 할 수 있으며 이제 포트 4001에서 실행되는 메시지 푸시 서버가 있습니다.
그러나 여기에 메시지를 보내는 백엔드 서버가 없으므로 Postman을 사용하여 메시지 보내기를 시뮬레이션 할 것입니다.
프로그램의 기능을 보여주기 위해 index.html 파일이 프로젝트의 클라이언트 폴더 아래에 배치됩니다. 이 파일은 실제 프로젝트에서 사용할 수 없으며 메시지 푸시의 효과를 표시하는 데 사용됩니다.
서버를 켜면 Client/Index.html을 열고 프롬프트에 따라 원하는대로 토 케니드를 입력하십시오.
이제 Postman을 사용하여 LocalHost에 다음 메시지를 게시하십시오. 4001/API :
{// 토큰 배열은 "토큰": [ "1", "2"], "data"를 눌러야하는 사용자를 나타냅니다. "당신은 통과하지 않아야합니다 !!!"}.이 시점에서 모든 것이 잘 진행되면 클라이언트 콘솔에서 수신 된 메시지를 볼 수 있어야합니다.
여러 클라이언트 페이지를 열고 다른 토 케니드를 입력 한 다음 메시지가 올바른 사용자에게 전송되는지 확인할 수 있습니다.
요약
위는 편집자가 Socket.io를 사용하여 실시간 메시지 푸시 기능을 실현하도록 소개 한 것입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!