HTML5 WebSocket 3 소개 - 통신 모델 소켓.io_javascript 기술-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

HTML5 WebSocket 3 소개 - 통신 모델 소켓.io_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

예

socket.io는 왜 탄생했나요? 아래 텍스트 설명을 참조하세요.

socket.io가 왜 필요한가요?

Node.js는 효율적인 서버 측 운영 환경을 제공하지만 브라우저 측의 HTML5에 대한 지원이 다르기 때문에 모든 브라우저와 호환되고 뛰어난 실시간 사용자 경험을 제공하며 클라이언트와 프로그래머를 위한 서비스 일관된 프로그래밍 경험을 제공하기 위해 Socket.io가 탄생했습니다.

Socket.io의 디자인 목표는 모든 브라우저와 모바일 장치를 지원하는 것입니다. 현재 주류 PC 브라우저(IE, Safari, Chrome, Firefox, Opera 등)와 모바일 브라우저(iphone Safari/ipad Safari/android WebKit/WebOS WebKit 등)를 지원합니다.

Socket.io는 node.js를 기반으로 하며 WebSocket API를 단순화하여 다양한 통신 API를 통합합니다. 지원되는 항목: WebSocket, Flash Socket, AJAX 긴 폴링, AJAX 멀티파트 스트리밍, Forever IFrame, JSONP 폴링.

Socket.io는 실시간 통신 문제를 해결하고 서버와 클라이언트의 프로그래밍 방식을 통일합니다. 소켓을 시작한 후에는 클라이언트와 서버 사이에 파이프라인을 설정하는 것과 같으며 양측이 서로 통신할 수 있습니다.

설치

명령줄에서 npm installsocket.io를 실행하여 설치합니다.

서버측 프로그래밍 모델

서버측 프로그래밍은 서버 시작, 서비스 제공, 이벤트 처리 등 일반 서버와 동일합니다.

예를 들어 다음 server.js는 다음과 같습니다.

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' &#63; 'text/javascript' : 'text/html'})
    res.write(data, 'utf8');
    res.end();
   });
   break;
  default: send404(res);
  }
}),
send404 = function(res){
  res.writeHead(404);
  res.write('404');
  res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
 console.log("Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

로그인 후 복사

클라이언트 프로그래밍 모델

클라이언트 프로그래밍도 비슷한 방식으로 처리되어 서버에 연결하고 정보를 교환합니다.

예를 들어 다음 index.html 페이지는 다음과 같습니다.

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/json.js"></script> <!-- for ie -->
  <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>  
  <script>    
  var socket;
  var firstconnect = true;
  function connect() {
   if(firstconnect) {
    socket = io.connect(null);
    socket.on('message', function(data){ message(data); });
    socket.on('connect', function(){ status_update("Connected to Server"); });
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
    socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in " 
     + nextRetry + " seconds"); });
    socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
    firstconnect = false;
   }
   else {
    socket.socket.reconnect();
   }
  }
  function disconnect() {
   socket.disconnect();
  }
  function message(data) {
   document.getElementById('message').innerHTML = "Server says: " + data;
  }
  function status_update(txt){
   document.getElementById('status').innerHTML = txt;
  }
  function esc(msg){
   return msg.replace(/</g, '<').replace(/>/g, '>');
  }
  function send() {
   socket.send("Hello Server!");  
  };    
  </script>
  <h1>Socket.io Test</h1>
  <div><p id="status">Waiting for input</p></div>
  <div><p id="message"></p></div> 
  <button id="connect" onClick='connect()'/>Connect</button>
  <button id="disconnect" onClick='disconnect()'>Disconnect</button>
  <button id="send" onClick='send()'/>Send Message</button>
 </body>
</html>

로그인 후 복사

참고

1. 서버를 시작하려면 node.js 명령줄 창을 열고 server.js가 있는 폴더로 이동한 후 node server.js를 입력하여 서버를 시작합니다.

위의 index.html에서 다음 줄에 주의하세요: . 로컬 소켓.io 스크립트를 사용하지 않으려면 다음을 수행하세요.

다음 공개 스크립트를 직접 사용하려면:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

로그인 후 복사

다음 줄도 참고하세요: socket = io.connect(null).

여기서 null은 로컬 서비스에 대한 연결을 나타내며 "localhost"로 대체할 수 있으며 효과는 동일합니다.

2.socket.io를 사용하여 http 서비스를 직접 시작할 수 있습니다.

예:

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

로그인 후 복사

3. Socket.io는 send 메소드를 통해 직접 메시지를 보내고 message 이벤트를 사용하여 메시지를 받을 수 있습니다.

//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>

로그인 후 복사

4. 데이터 전송 및 처리

양쪽 끝은 서로 이벤트를 보내고, 서로 데이터를 보내고, 서로 통신할 수 있습니다. 이벤트를 보내는 코드는 다음과 같습니다. 소켓.emit(action, data, function), 여기서 action은 이벤트의 이름, data는 데이터, function은 이벤트를 처리하는 코드입니다. on(action, function), 내보내는 경우 데이터가 있는 경우 함수의 매개변수에 이 데이터가 포함됩니다. 내장된 이벤트를 보내고 처리하는 것 외에도 연결, 연결 끊기, 메시지와 같은 소켓.io가 있습니다. 또한 다음과 같은 사용자 정의 이벤트를 보내고 처리할 수 있습니다.

//서버:

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});

로그인 후 복사

//클라이언트:

<script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io.connect('http://localhost');
 socket.on('news', function (data) {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
 });
</script>

로그인 후 복사

5. 위에서 볼 수 있듯이 데이터를 보낼 때 send와 Emit을 모두 사용할 수 있습니다. 단지 방출이 사용자 정의 이벤트 처리를 강화한다는 것뿐입니다.

6. 서버 측 소켓의 get/set 메소드를 사용하여 클라이언트 측에 관련 데이터를 저장할 수 있습니다. 예:

//서버

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

로그인 후 복사

//클라이언트

<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname&#63;'));
  socket.on('ready', function () {
   console.log('Connected !');
   socket.emit('msg', confirm('What is your message&#63;'));
  });
 });
</script>

로그인 후 복사

7. 현재 소켓 연결을 제외한 채팅방의 모든 사람에게 메시지를 보내는 등 메시지를 브로드캐스트할 수 있습니다.

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});

로그인 후 복사

8. 여러 개의 링크를 설정하는 대신 동일한 링크에 여러 개의 독립 채널을 설정할 수 있습니다. 이 공식 이름은 공식 예와 같이 "다중 네임스페이스"입니다.

var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>

로그인 후 복사

socket.io 구성

Socket.io의 구성은 매우 간단합니다. Express를 구성했다면 거의 동일한 방법을 사용한다는 것을 알 수 있습니다. 먼저 작은 예를 살펴보겠습니다.

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

로그인 후 복사

보시다시피, 소켓.io는 구성을 위해 구성, 설정, 활성화 및 비활성화를 사용합니다.

1. 다양한 운영 환경에서 동작을 구성하려면 구성 메소드를 사용하세요. 즉, 다양한 환경에서 다양한 구성 옵션을 활성화할 수 있습니다. 구성의 첫 번째 매개변수는 실행 환경이고, 두 번째 매개변수는 구성을 위한 기능입니다. 실행 환경은 일반적으로 프로덕션 또는 개발입니다. 물론 여기서는 모든 문자열을 사용할 수 있습니다. 구성의 첫 번째 매개변수가 생략되면 이후 구성은 환경에 관계없이 공개되고 유효함을 의미합니다.

2. 다양한 운영 환경을 구성한 후 현재 실행 중인 환경은 어떻게 설정하나요? 이는 명령줄에서 환경 변수 NODE_ENV의 값을 수정하여 수행됩니다.

3. 구성 구성 기능에서는 설정, 활성화 및 비활성화를 사용하여 관련 옵션을 설정할 수 있습니다.

4. 구성 가능한 특정 항목에 대한 참조: https://github.com/LearnBoost/Socket.IO/wiki/Configuring-Socket.IO
실무 참고자료

Socket.io 소개: http://davidchambersdesign.com/getting-started-with-socket.io/

socket.io 설치 및 사용 지침: http://socket.io/

socket.io 위키: https://github.com/LearnBoost/Socket.IO/wiki

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7629

Cakephp 튜토리얼

1389

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

141

Related knowledge

Python 함수 소개: exec 함수 소개 및 예 Nov 03, 2023 pm 02:09 PM

Python 함수 소개: exec 함수 소개 및 예 소개: Python에서 exec는 문자열이나 파일에 저장된 Python 코드를 실행하는 데 사용되는 내장 함수입니다. exec 함수는 코드를 동적으로 실행하는 방법을 제공하여 프로그램이 런타임 중에 필요에 따라 코드를 생성, 수정 및 실행할 수 있도록 합니다. 이 기사에서는 exec 함수를 사용하는 방법을 소개하고 몇 가지 실용적인 코드 예제를 제공합니다. exec 함수 사용 방법: exec 함수의 기본 구문은 다음과 같습니다. exec

Oracle DECODE 기능 상세 설명 및 사용 예시 Mar 08, 2024 pm 03:51 PM

Oracle의 DECODE 함수는 쿼리 문의 다양한 조건에 따라 다양한 결과를 반환하는 데 자주 사용되는 조건식입니다. 이 기사에서는 DECODE 함수의 구문, 사용법 및 샘플 코드를 자세히 소개합니다. 1. DECODE 함수 구문 DECODE(expr,search1,result1[,search2,result2,...,default]) expr: 비교할 표현식 또는 필드입니다. 검색1,

Go 언어 들여쓰기 사양 및 예 Mar 22, 2024 pm 09:33 PM

Go 언어의 들여쓰기 사양 및 예 Go 언어는 간결하고 명확한 구문으로 알려져 있으며, 들여쓰기 사양은 코드의 가독성과 아름다움에 중요한 역할을 합니다. 이번 글에서는 Go 언어의 들여쓰기 사양을 소개하고, 구체적인 코드 예시를 통해 자세히 설명하겠습니다. 들여쓰기 사양 Go 언어에서는 들여쓰기에 공백 대신 탭이 사용됩니다. 각 들여쓰기 수준은 하나의 탭이며 일반적으로 4칸의 너비로 설정됩니다. 이러한 사양은 코딩 스타일을 통합하고 팀이 함께 작업하여 컴파일할 수 있도록 합니다.

Python 함수 소개: abs 함수의 사용법 및 예 Nov 03, 2023 pm 12:05 PM

Python 함수 소개: abs 함수 사용법 및 예 1. abs 함수 사용법 소개 Python에서 abs 함수는 주어진 값의 절대값을 계산하는 데 사용되는 내장 함수입니다. 숫자 인수를 허용하고 해당 숫자의 절대값을 반환할 수 있습니다. abs 함수의 기본 구문은 다음과 같습니다: abs(x) 여기서 x는 정수 또는 부동 소수점 숫자일 수 있는 절대값을 계산하기 위한 숫자 매개변수입니다. 2. abs 함수의 예 아래에서는 몇 가지 구체적인 예를 통해 abs 함수의 사용법을 보여줍니다. 예 1: 계산

Python 함수 소개: isinstance 함수의 사용법 및 예 Nov 04, 2023 pm 03:15 PM

Python 함수 소개: isinstance 함수의 사용법 및 예 Python은 프로그래밍을 보다 편리하고 효율적으로 만들기 위해 많은 내장 함수를 제공하는 강력한 프로그래밍 언어입니다. 매우 유용한 내장 함수 중 하나는 isinstance() 함수입니다. 이 기사에서는 isinstance 함수의 사용법과 예를 소개하고 구체적인 코드 예를 제공합니다. isinstance() 함수는 객체가 지정된 클래스나 유형의 인스턴스인지 여부를 확인하는 데 사용됩니다. 이 함수의 구문은 다음과 같습니다

Python 함수 소개: eval 함수의 함수 및 예 Nov 04, 2023 pm 12:24 PM

Python 함수 소개: eval 함수의 함수 및 예 Python 프로그래밍에서 eval 함수는 매우 유용한 함수입니다. eval 함수는 문자열을 프로그램 코드로 실행할 수 있으며 그 기능은 매우 강력합니다. 이 기사에서는 eval 함수의 세부 기능과 몇 가지 사용 예를 소개합니다. 1. eval 함수의 기능 eval 함수의 기능은 매우 간단합니다. 문자열을 Python 코드로 실행할 수 있습니다. 이는 문자열을 변환할 수 있음을 의미합니다.

Python 함수 소개: 함수 및 정렬 함수의 예 Nov 03, 2023 pm 02:47 PM

Python 함수 소개: 함수 및 정렬된 함수의 예 Python은 풍부한 내장 함수와 모듈을 갖춘 매우 강력한 프로그래밍 언어입니다. 이 시리즈 기사에서는 Python에서 일반적으로 사용되는 기능을 하나씩 소개하고 해당 예제를 제공하여 독자가 이러한 기능을 더 잘 이해하고 적용할 수 있도록 돕습니다. 이번 글에서는 Sorted 함수의 기능과 예시를 자세히 소개하겠습니다. sorted 함수는 반복 가능한 객체를 정렬하고 새로운 정렬 목록을 반환하는 데 사용됩니다. 숫자와 단어에 사용할 수 있습니다.

PHP 도트 연산자의 응용 및 예제 분석 Mar 28, 2024 pm 12:06 PM

PHP 도트 연산자의 응용 및 예제 분석 PHP에서 도트 연산자(".")는 두 문자열을 연결하는 데 사용되는 연산자로 문자열을 연결할 때 매우 일반적으로 사용되며 매우 유연합니다. 도트 연산자를 사용하면 여러 문자열을 쉽게 연결하여 새 문자열을 만들 수 있습니다. 다음은 예제 분석을 통해 PHP 도트 연산자의 사용을 소개합니다. 1. 기본 사용법 먼저 기본적인 사용법 예를 살펴보겠습니다. 각각 두 단어를 저장하는 두 개의 변수 $str1과 $str2가 있다고 가정합니다.

See all articles

HTML5 WebSocket 3 소개 - 통신 모델 소켓.io_javascript 기술

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제