Node.js WebSocket Programming Tutorial with JavaScript

안녕하세요 여러분 오늘 저는 웹 소켓 프로그래밍을하는 방법을 보여 드리겠습니다 nodejs를 사용하면 JavaScript로 몇 가지 예제를 함께 살펴볼 것입니다 클라이언트와 소켓 사이에 상시 연결 소켓 연결을 작성하려고합니다

서버와 클라이언트와 클라이언트 사이에서 인터넷을 통해 피어 프로세스에 양방향으로 데이터를 즉시 전송 채팅 애플리케이션 또는 멀티 플레이어를 구축 할 때 유용합니다 온라인 게임 또는 주식 시세 앱 실시간 GPS 위치 추적지도 실시간 웹 경매 또는 그 사이의 모든 것 클라이언트-서버 통신을위한 vanilla nodejs 코드 프로덕션 환경에서는 웹 호스팅 공급자를 사용하여이 응용 프로그램을 배포합니다 AWS와 클라이언트가 그들의 인터넷 연결은 nodejs 네이티브 넷 라이브러리를 통해 쉽게 서버가 시작되고 포트 98에 바인딩 된 소켓 연결 열기 및 처리 시작하기 전에 클라이언트가 실행될 때 실행할 이벤트 핸들러를 할당합니다

클라이언트가 TCP를 통해이 앱에 연결 한 후 서버에 연결 연결 서버는 클라이언트에게 문자열을 보낸다 서버 말하기 서버는 클라이언트가 서버로 보내는 모든 데이터를 기록합니다 소켓 연결이 닫히기 직전에 서버가 클라이언트에게 닫힘을 알려줍니다 연결 이제 다음에 클라이언트 nodejs 코드와 그 뒤에 일부가 표시됩니다 클라이언트를 기존 웹 페이지를 통해 연결하는 브라우저 JavaScript 앱은 nodejs에서 동일한 넷 라이브러리를 사용합니다

TCP 소켓 연결이 로컬 호스트 포트 98 98 인 서버 클라이언트가 서버에 hello라는 메시지를 보낸다 서버가 클라이언트에 데이터를 보낼 때 클라이언트가 여기에 기록합니다 클라이언트-서버 상호 작용 실행 실시간으로 클라이언트가 서버와 연결하여 문자열을 교환 한 다음 클라이언트 웹 브라우저에서 수행하는 작업을 보여주기 전에 연결을 끊고 종료합니다 WebSockets를 사용하여 서버에 연결하여 클라이언트에 연결하는 방법 양방향 메시지 이것은 일종의 복잡한 작업입니다 서버 앱에서 라우팅하여 두 클라이언트의 브로커로 전환 클라이언트가 항상 공개적이지 않기 때문에 클라이언트에 직접 연결할 수 없습니다 서버 응용 프로그램이 항상 액세스 할 수있는 IP 주소로 서버 구성 요소가 피어 투 피어 양방향 메시징을 구현하려는 경우 필요 WebSocket 연결을 위해 브라우저에서 JavaScript가 어떻게 보이는지 봅시다 브라우저에서의 소켓 프로그래밍은 약간 복잡하지만 웹 소켓 프로그래밍은 아니고 우리에게 동일한 목표를 달성합니다

기본적으로 사용할 수있는 브라우저의 소켓 서버 코드와 WebSocket 서버 코드 모든 현대에서 작동하는 내장 객체가있는 WebSocket 프로토콜 브라우저 터미널에서 WebSocket 서버 스크립트를 실행하고 HTML을로드합니다 Chrome에서 파일을 보면 브라우저가 서버에 연결되어 있음을 알 수 있습니다 그들은 각각 서로에게 문자열을 보낸 다음 내가 연결되면 연결이 종료됩니다 내 브라우저에서 웹 페이지를 새로 고치면 똑같은 것을 다시 볼 수 있지만 이를 위해 클라이언트와 클라이언트 간 통신은 어떻습니까? 브라우저 대 브라우저 nodejs 클라이언트 대 nodejs 클라이언트 브라우저 대 nodejs 클라이언트 PubNub와 같은 서비스를 사용하면이 모든 것을 쉽게 수행 할 수 있습니다 장치가 TCP를 말할 수 있다면 양방향 장치와 장치를 연결할 수 있습니다 모든 메시지 볼륨에서 커뮤니케이션 PubNub는 무료로 가입하고 무료입니다 API 키를 사용하여 한 달에 최대 백만 건의 메시지를 영원히 보낼 수 있습니다 이로 인해 PubNub는 애호가 학생들과 기업들이 쉽게 선택할 수 있습니다

개념 증명을 구축하기 위해 클라이언트에서 클라이언트로 보내는 메시지를 보자 전송 코드는 nodejs와 비슷합니다이 코드는 거의 동일합니다 여기에 웹 브라우저 JavaScript를 위해 먼저 클라이언트 1이 있습니다 무료 API 키를 사용하여 전 세계에 분산 된 무한 확장 가능한 PubNub 네트워크 다음에 우리는 당신이 그들을 사용할 때 채널 채널이 만들어집니다 구독 당신이 원하는만큼을 만들고 그들은 영원히 구독 구독 장치가 의미 특정 채널에 게시 된 모든 메시지 수신 여기에 한 번에 하나 이상의 채널을 구독 할 수 있습니다

새 메시지가 전달 될 때 실행되는 이벤트 핸들러 다음 구독은 사용자가 누를 때마다 실행되는 기능을 설정합니다 그들의 리턴 키 PubNub publish 메소드는 PubNub 네트워크를 사용하는 채널의 메시지는이 메시지가 강도 번호 JSON 객체 원하는 모든 스크립트를 만들었습니다 다음을 나타내는 메시지를 게시한다는 점을 제외하면 거의 동일합니다 클라이언트 번호 2입니다 2 개의 PubNub 기반 스크립트를 2 개로 실행하겠습니다

즉각적인 피어 투 피어 양방향 메시지를 표시하는 터미널 창 집중된 터미널에서 Enter 키를 누를 때마다 PubNub의 전달 기능 윈도우 스크립트는 새로운 PubNub 메시지를 전송합니다 동일한 채널이므로 양쪽에서 동일한 데이터를 볼 수 있습니다 다른 스크립트가 다른 쪽의 컴퓨터에서 실행되는 경우와 동일한 방법 전세계 PubNub 메시지의 대기 시간은 일반적으로 클라이언트와의 거리에 따라 250 밀리 초 PubNub를 사용하면이 멋진 펍 / 서브 메시징 기능을 구축 할 수 있습니다 채팅 앱 멀티 플레이어 게임은지도에서 실시간 위치 정보 추적 매일 약 430 억 개 이상의 메시지가 PubNub 네트워크를 통해 전송됩니다 2,000 명 이상의 행복한 고객이 PubNub를 무료로 사용해보십시오 dashboard

pubnubcom/signup은 GitHub의 스타터 코드도 확인하십시오 다음 프로그래밍을 시작할 수 있도록 모든 프로그래밍 언어 시청 해 주셔서 감사합니다