SSE (Server Sent Events)로 실시간 응용 프로그램 작성-JS 튜토리얼-php.cn

SSE (Server Sent Events)로 실시간 응용 프로그램 작성

DDD

풀어 주다： 2025-01-28 08:31:12

원래의

176명이 탐색했습니다.

10 년 전, 실시간 응용 프로그램 (예 : 채팅 또는 업데이트 피드)을 개발 해야하는 경우 우선 계획은 여론 조사입니다. 이 기술은 시간마다 업데이트 데이터를 서버로 보내고 HTTP 요청을 반복적으로 전송합니다. 그러나 새로운 정보가 없더라도 요청이 여전히 전송되어 대역폭 및 서버 처리 기능을 낭비합니다.

다행히도 시간이 바뀝니다. 이제 JavaScript를 사용하여 EventSource 라이브러리를 사용하여 SSE (Server Sending Event) 연결을 설정할 수 있습니다. 이 기사는 SSE의 개념을 논의하고 간단한 튜토리얼을 제공합니다.

Criando aplicações em tempo real com SSE (Server-Sent Events) 라이브 연결 기존의 HTTP 요청과는 (클라이언트가 요청을 발행하고, 서버가 응답을 반환 함) SSE 연결은 항상 서버에서 클라이언트로 일원 통신을 실현하기 위해 열려 있습니다. 두 개의 통신 통신을 허용하는 WebSocket과 달리 SSE는 클라이언트에만 데이터를 보내고 클라이언트는 연결 중에 실시간을 수신합니다.

연결이 설정된 후 데이터는 이벤트 형태로 JavaScript 클라이언트에 도달합니다. 서버는 필요한 경우 업데이트 된 데이터가 포함 된 이벤트를 전송해야합니다.

연결이 닫히지 않으면 클라이언트는 서버가 전송하는 새 데이터 이벤트를 계속 기다릴 것입니다. 이는 지속적으로 업데이트, 계기판 또는 채팅을 해야하는 통지를 구축하는 이상적인 기술입니다.

관리 시스템을 연결하십시오 위의 개념을 연습하기 위해 JavaScript 클라이언트 (프론트 엔드)에 대한 SSE 연결 엔드 포인트를 제공하기 위해 Node.js (back -end) 응용 프로그램을 생성합니다.

응용 프로그램은 userId를 입력하고 SSE 연결을 설정 해야하는 시스템입니다. 그런 다음 서버는 5 초마다 이벤트를 보내고 사용자 목록 목록을 반환합니다. 사용자가 연결을 끄면 연결된 사용자 목록에서 자동으로 제거됩니다.

Criando aplicações em tempo real com SSE (Server-Sent Events) 시작하자!

<.> index.js 파일을 만들고 백 -엔드 로직을 집중하십시오. 또한 페이지를 관리하려면 index.html 및 script.js 파일을 저장할 수있는/공개 폴더를 작성하십시오. 구조는 다음과 같습니다.

index.js에서 Express 라이브러리를 가져옵니다 (HTTP 엔드 포인트 생성에 사용) :

/public/index.html에서 기본 HTML을 만들어 제목을 표시하고 서버가 실행되는지 테스트하십시오. Criando aplicações em tempo real com SSE (Server-Sent Events) 이제, NPM을 터미널에서 시작하는 경우, 페이지는 브라우저에 표시되어야합니다.

백엔드로 돌아가서 Connection.js 파일을 작성하여 사용자와 서버 간의 연결을 관리합니다.

IT에서 연결 클래스를 내보내고 사용자 (새 사용자 등록) 및 removeUser 메소드 (맵핑에서 사용자를 제거) :

에 연결된 사용자 매핑을 저장합니다.

<code class="language-bash">npm init -y
npm i express</code>

로그인 후 복사

연결 클래스가 연결 관리 로직을 격리 했으므로 클라이언트가 SSE 통신을 시작할 수 있도록 서버 (index.js)에서 엔드 포인트를 구성해야합니다.

여기에 세 가지 점이 있습니다 :

<code>/public
  index.html
  script.js
index.js
package.json</code>

로그인 후 복사

/Events 엔드 포인트는 헤드를 사용하여 클라이언트에 응답해야합니다. 이를 통해 클라이언트는 SSE 커뮤니케이션을 식별하고 이벤트 지원 객체를 만들어 연결을 설정할 수 있습니다.

~~서버는 5 초마다 연결된 클라이언트에 이벤트 응답을 보냅니다.~~

이벤트 모니터링 종료 연결을 사용하면 연결 해제 된 사용자가 연결 맵핑에서 제거 할 수 있습니다.

백엔드가 완료되었습니다! 이제 프론트 엔드에주의를 기울일 수 있습니다. Content-Type: text/event-stream 서버가 SSE 연결 엔드 포인트를 제공 했으므로 클라이언트는이 주소를 요청하고 전송 이벤트를 기다려야합니다.
사용자가 userID를 입력 할 수있는 텍스트 필드; <:> 두 버튼 : 하나는 시작 용이고 다른 하나는 SSE 연결을 끄는 데 사용됩니다 연결된 사용자 목록을 표시하는 a
req.on("close", () => {})

브라우저에서 두 개의 탭 페이지를 열어 실시간 연결을 테스트하여 사용자의 업데이트를 관찰하십시오.

이것은 간단한 SSE 실시간 연결 시스템을 완료합니다. 이 기술은 서버가 피드, 채팅 또는 계기판과 같은 클라이언트에게 일회성 데이터를 계속 전송하는 데 매우 적합합니다.

무결성의 경우 함수에

검사를 추가하고 이벤트 처리 절차를 추가하는 것과 같은 오류 처리 및 일부 코드 세부 사항을 추가했습니다. 이러한 개선 사항은 코드의 견고성과 신뢰성을 향상시킵니다.

위 내용은 SSE (Server Sent Events)로 실시간 응용 프로그램 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!