Node.js에서 WebSocket 연결을 만드는 방법은 무엇입니까?

Node Jseseo Websocket Yeongyeol Eul Mandeuneun Bangbeob Eun Mueos Ibnikka



WebSocket은 기본적으로 클라이언트와 서버 측 간의 전이중 통신을 활성화하기 위해 개발자가 응용 프로그램에서 사용하는 프로토콜입니다. 이러한 종류의 통신을 통해 사용자는 지연 없이 실시간으로 서버와 통신할 수 있습니다. 오늘날 이 프로토콜은 더 나은 사용자 경험을 제공하기 위해 거의 모든 웹 애플리케이션에서 사용되고 있습니다.

이 문서에서는 Node.js에서 webSocket 연결을 생성하는 절차를 설명합니다.

Node.js에서 WebSocket 연결을 만드는 방법은 무엇입니까?

WebSocket 연결은 클라이언트 측 개발과 서버 측의 두 부분으로 구성됩니다. 양쪽 사이의 매개체 역할을 하는 더미 웹사이트도 만들어야 합니다. 이를 사용하면 메시지가 양쪽에서 전송됩니다. NodeJs에서 WebSocket을 생성하려면 아래 단계를 따르세요.







1단계: NodeJs 환경 설정

'의 도움으로 CD ' 명령을 실행하고 프로젝트 폴더를 탐색한 후 그 안에서 ' 명령을 실행합니다. npm 초기화 -y ' 기본 NodeJs 모듈을 설치하려면 다음을 수행하십시오.



npm 초기화 - 그리고

위 명령을 실행하면 '라는 이름의 새 파일이 생성됩니다. 패키지.json 프로젝트와 관련된 기본 정보를 저장하는 '이 생성됩니다.







2단계: WebSocket 모듈 설치

WebSocket 프로토콜을 사용하려면 '라는 이름의 모듈을 사용하세요. ws '를 NodeJs 프로젝트에 설치해야 합니다. 설치 명령은 아래와 같습니다.



npm 설치 ws

아래 출력은 “ ws '가 원하는 NodeJs 디렉터리에 설치되었습니다.

3단계: WebSocket 서버 설정

webSocket 프로토콜의 서버 측을 설정하려면 새 ' .js ' 이름이 ' 인 프로젝트 폴더 안에 파일을 입력하세요. 서버 측 ”를 입력하고 아래 코드를 삽입합니다.

const wsObj = 필요하다 ( 'ws' ) ;

const ws = 새로운 wsObj. 섬기는 사람 ( { 포트 : 3000 } ) ;

콘솔. 통나무 ( 'Linuxhint 서버가 시작되었습니다' ) ;

위 코드에 대한 설명은 다음과 같습니다.

  • 첫째, '의 도움으로 필요하다() ” 방법, “ ws 위 섹션에 이미 설치된 ' 모듈은 현재 ' 서버사이드.js ” 파일.
  • 다음으로 '를 호출합니다. 섬기는 사람() ”의 객체를 이용한 메소드 ws ' 이름이 ' '인 모듈 wsObj '를 입력하고 '의 포트 번호를 전달합니다. 3000 ”를 사용하여 지정된 Localhost 포트에서 서버를 시작합니다.
  • 또한 콘솔 창에 임의의 메시지를 표시하여 서버 측에서 서버가 시작되었는지 확인합니다.

4단계: WebSocket 클라이언트 설정

'라는 이름의 다른 파일을 만듭니다. 고객 입장에서 ” 서버에 연결되는 클라이언트 측을 설정합니다. 서버를 통해 연결될 때 임의의 메시지를 표시하는 기본 클라이언트 측을 설정하려면 아래 코드를 삽입하십시오.

const 객체 = 새로운 웹소켓 ( 'ws://localhost:3000' ) ;

obj. addEventListener ( '열려 있는' , ( ) => {

콘솔. 통나무 ( 'Linuxhint 서버에 연결되었습니다!' ) ;

} ) ;

위 코드 블록에 대한 설명은 다음과 같습니다.

  • 먼저 '에 대한 새 객체를 만듭니다. 웹소켓() ” 포트 번호가 “인 로컬 호스트에서 수신되는 프로토콜입니다. 3000 '.
  • 그런 다음 '라는 변수에 새 개체를 저장합니다. 객체 '.
  • 그런 다음 '의 이벤트 리스너를 연결합니다. 열려 있는 '이것으로' 객체 '. 이 이벤트 리스너는 서버가 제공된 포트 번호를 사용하여 Localhost에 로드될 때 익명 함수를 실행합니다.
  • 이 기능은 콘솔을 통해 임의의 연결 관련 메시지를 표시합니다.

5단계: 웹페이지 생성

프로젝트 디렉토리 내부에 ' .html '라는 이름을 가진 파일 유형' 색인 ”에는 HTML의 기본 구조와 함께 “를 가져오기 위한 단일 스크립트 태그가 포함되어 있습니다. 클라이언트사이드.js ” 파일:

문서 유형 HTML >

< HTML만 = '안에' >

< 머리 >

< 메타 문자셋 = 'UTF-8' >

< 제목 > 고객 제목 >

머리 >

< >

< h1 > 리눅스힌트 웹사이트 h1 >

>

< 스크립트 소스 = '클라이언트사이드.js' > 스크립트 >

HTML >

6단계: 실행

'를 엽니다. index.html '라는 메시지를 디렉토리에서 직접 웹페이지에 표시합니다. 그런 다음 터미널이나 명령 프롬프트로 이동하여 아래 명령을 실행하십시오.

노드 서버 측

출력 메시지에는 서버가 시작되었음을 표시합니다.

이제 서버를 닫지 않고 index.html로 이동하여 웹 브라우저를 통해 엽니다. 콘솔 창에 연결 성공 메시지가 나타납니다.

출력에는 클라이언트와 서버 측 사이에 연결이 설정되었음을 표시합니다. 이 블로그에서는 NodeJs에서 webSocket 연결을 생성하는 과정을 설명했습니다.

결론

NodeJs에서 webSocket 연결을 생성하려면 새 NodeJs 프로젝트를 생성하고 “ ws ' 모듈을 실행하여 ' npm 설치 ws ' 명령. 이제 서버측 파일을 생성하고 그 안에 ' ws ” 모듈. 이 모듈을 사용하여 포트 '에서 WebSocket 서버를 생성하십시오. 3000 '. '에 대한 새 개체를 정의해야 하는 클라이언트측용 다른 파일을 만듭니다. 웹소켓 ' 명명 된 ' 객체 '그리고 포트에서 수신 대기하게 만듭니다.' 3000 '. 이 블로그에서는 NodeJs에서 WebSocket 연결을 설정하는 절차를 설명했습니다.