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

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