찾다
웹 프론트엔드JS 튜토리얼node.js_javascript 클래스 라이브러리에서 소켓.io 시작하기

웹소켓 및 기타 역방향 Ajax 기술 소개

실시간 웹 애플리케이션에서 일반적인 방식은 역Ajax입니다. 역방향 Ajax의 정의:

Reverse Ajax(Reverse Ajax)는 기본적으로 서버에서 클라이언트로 데이터를 보낼 수 있는 개념입니다. 표준 HTTP Ajax 요청에서 데이터는 서버로 전송됩니다. Reverse Ajax는 몇 가지 특정 방식으로 Ajax 요청을 시뮬레이션할 수 있습니다. 이러한 방법은 이 방법으로 서버가 서버에 데이터를 보낼 수 있습니다. 가능합니다. 클라이언트가 이벤트를 보냅니다(낮은 대기 시간 통신).

Reverse Ajax 기술에는 크게 두 가지 내용이 있습니다. 하나는 클라이언트에 보낼 데이터가 있을 때까지 서버가 TCP 연결을 유지하는 것이고(루프 및 절전 모드를 사용하여 구현할 수 있음), 다른 하나는 클라이언트 js 프로그래밍 기술입니다.

Websocket은 HTML5의 표준이자 Anti-Ajax 기술이기도 합니다.

Socket.io 역방향 AJAX 기술 구현 예시

socket.io 공식 소개:

Socket.IO는 모든 브라우저와 모바일 장치에서 실시간 앱을 구현하여 다양한 전송 메커니즘 간의 차이를 모호하게 만드는 것을 목표로 하며 모든 브라우저, 소켓에서 실시간 연결을 100% 제공합니다. IO는 API에 영향을 주지 않고 런타임에 가장 유능한 전송을 선택합니다. WebSocket Adobe® Flash® Socket AJAX 롱 폴링 AJAX 멀티파트 스트리밍 Forever Iframe JSONP 폴링

간단히 말하면, Socket.io는 nodejs 기반의 라이브러리로, 여러 Reverse Ajax 기술을 패키지하고 인터페이스를 통합합니다. 런타임 시, 소켓.io는 브라우저 조건에 따라 소켓.io 서버와 상호 작용하기 위해 적절한 역방향 Ajax 기술을 자동으로 선택합니다. websocket과 같은 기술이 표준이라면, 소켓.io는 애플리케이션입니다.

설치 방법은 다음과 같습니다(저자는 Linux Mint 16을 사용합니다).

node.js 설치:

코드 복사 코드는 다음과 같습니다.
sudo apt- get install nodejs

nodejs 명령을 입력하여 쉘 모드로 들어갑니다.

npm 설치:

코드 복사 코드는 다음과 같습니다.
sudo apt-get install npm

socket.io 설치:
코드 복사 코드는 다음과 같습니다.
sudo npm install 소켓.io

설치 패키지는 ~/node_modules 디렉터리에 저장되고, 클라이언트 소켓.io.js는 ~/node_modules/socket.io/node_modules/socket.io-에 저장됩니다. 클라이언트/dist 디렉토리.

socket.io 예

다음 예시는 공식 홈페이지에서 가져온 것이며 적절하게 수정되었습니다.

먼저 서버측(서버측) 코드(test.js 파일)를 생성합니다.

코드 복사 코드는 다음과 같습니다:

var io = require('socket.io').listen(8080);

io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('나의 다른 이벤트' , function (data) {
console.log(data);
});
});


서버 test.js는 포트 8080에 바인딩되어 있습니다. 클라이언트가 연결될 때 test.js 서버가 실행 중이면 test.js 서버는 클라이언트에 news 명령을 보내고 test.js 서버가 my other 이벤트 명령을 수신하면 콜백을 호출합니다. function function (data) { console.log(data);} 수신된 데이터를 처리합니다.

저자는 포트 80을 사용하고 웹 루트 디렉터리는 /usr/share/nginx/html인 nginx 서버를 구축했습니다. ~/node_modules/socket.io/node_modules/socket.io-client/dist 아래의 소켓.io.min.js를 웹 루트 디렉터리에 복사하고, 웹 루트 디렉터리에 (클라이언트로) index.php 파일을 생성합니다. 내용은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

< ;head>



<script><BR> var 소켓 = io.connect('http://localhost:8080');<BR> 소켓.on('news', function (data) {<BR> console.log(data) ;<BR> console .log(data["hello"]);<BR> 소켓.emit('my other event', { my: 'data' });<BR> });<BR></ 스크립트><BR> <P></script>
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
Vercel是什么?怎么部署Node服务?Vercel是什么?怎么部署Node服务?May 07, 2022 pm 09:34 PM

Vercel是什么?本篇文章带大家了解一下Vercel,并介绍一下在Vercel中部署 Node 服务的方法,希望对大家有所帮助!

node.js gm是什么node.js gm是什么Jul 12, 2022 pm 06:28 PM

gm是基于node.js的图片处理插件,它封装了图片处理工具GraphicsMagick(GM)和ImageMagick(IM),可使用spawn的方式调用。gm插件不是node默认安装的,需执行“npm install gm -S”进行安装才可使用。

一文解析package.json和package-lock.json一文解析package.json和package-lock.jsonSep 01, 2022 pm 08:02 PM

本篇文章带大家详解package.json和package-lock.json文件,希望对大家有所帮助!

怎么使用pkg将Node.js项目打包为可执行文件?怎么使用pkg将Node.js项目打包为可执行文件?Jul 26, 2022 pm 07:33 PM

如何用pkg打包nodejs可执行文件?下面本篇文章给大家介绍一下使用pkg将Node.js项目打包为可执行文件的方法,希望对大家有所帮助!

分享一个Nodejs web框架:Fastify分享一个Nodejs web框架:FastifyAug 04, 2022 pm 09:23 PM

本篇文章给大家分享一个Nodejs web框架:Fastify,简单介绍一下Fastify支持的特性、Fastify支持的插件以及Fastify的使用方法,希望对大家有所帮助!

node爬取数据实例:聊聊怎么抓取小说章节node爬取数据实例:聊聊怎么抓取小说章节May 02, 2022 am 10:00 AM

node怎么爬取数据?下面本篇文章给大家分享一个node爬虫实例,聊聊利用node抓取小说章节的方法,希望对大家有所帮助!

手把手带你使用Node.js和adb开发一个手机备份小工具手把手带你使用Node.js和adb开发一个手机备份小工具Apr 14, 2022 pm 09:06 PM

本篇文章给大家分享一个Node实战,介绍一下使用Node.js和adb怎么开发一个手机备份小工具,希望对大家有所帮助!

图文详解node.js如何构建web服务器图文详解node.js如何构建web服务器Aug 08, 2022 am 10:27 AM

先介绍node.js的安装,再介绍使用node.js构建一个简单的web服务器,最后通过一个简单的示例,演示网页与服务器之间的数据交互的实现。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구

VSCode Windows 64비트 다운로드

VSCode Windows 64비트 다운로드

Microsoft에서 출시한 강력한 무료 IDE 편집기

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

에디트플러스 중국어 크랙 버전

에디트플러스 중국어 크랙 버전

작은 크기, 구문 강조, 코드 프롬프트 기능을 지원하지 않음