HTML 5 WebSocket 기술 사용 에 대한 상세 한 설명

10130 단어 WebSocket
WebSocket
웹 소켓 은 HTML 5 가 제공 하기 시작 한 브 라 우 저 와 서버 간 의 듀 플 렉 스 통신 을 위 한 네트워크 기술 이다.
현재 많은 사이트 들 이 실시 간 통신 을 실현 하기 위해 사용 하 는 기술 은 모두 폴 링(polling)이다.폴 링 은 특정한 시간 간격(예 를 들 어 1 초 마다)에서 브 라 우 저 에서 서버 에 HTTP 요청 을 한 다음 에 서버 에서 최신 데 이 터 를 고객 센터 의 브 라 우 저 에 게 되 돌려 주 는 방식 으로 큰 단점 이 있 는데 이것 은 바로 많은 대역 폭 을 차지 하 는 것 이다.
최신 폴 링 효 과 는 Comet C 가 AJAX 를 사용 한 것 이다.그러나 이 기술 은 전 쌍 공 통신 에 이 를 수 있 지만 요청 이 필요 하 다.
웹 소켓 을 사용 하면 브 라 우 저 와 서버 가 악수 하 는 동작 만 하면 브 라 우 저 와 서버 사이 에 빠 른 채널 이 형성 되 고 둘 사이 에 데이터 가 서로 전송 된다.그리고 이 는 우리 에 게 실시 간 서 비 스 를 실현 하 는 데 두 가지 좋 은 점 을 가 져 다 주 었 다.
자원 절약:서로 소통 하 는 Header 는 매우 작다.-대략 2 Bytes 밖 에 없다.
푸 시 정보:클 라 이언 트 요청 이 필요 하지 않 습 니 다.서버 는 클 라 이언 트 에 게 데 이 터 를 주동 적 으로 전송 할 수 있 습 니 다.
socket.io
Socket.IO 는 웹 Socket 라 이브 러 리 로 클 라 이언 트 의 js 와 서버 의 nodejs 를 포함 합 니 다.서로 다른 브 라 우 저 와 모 바 일 장치 에서 사용 할 수 있 는 실시 간 응용 프로그램 을 구축 하 는 것 이 목표 입 니 다.
socket.io 의 특징
용이 성:socket.io 는 서버 와 클 라 이언 트 를 봉 하여 사용 하기에 매우 간단 하고 편리 합 니 다.
크로스 플랫폼:socket.io 는 크로스 플랫폼 을 지원 합 니 다.이것 은 당신 이 더 많은 선택 을 했 고 자신 이 좋아 하 는 플랫폼 에서 실시 간 응용 을 개발 할 수 있다 는 것 을 의미 합 니 다.
적응:브 라 우 저 에 따라 웹 소켓,AJAX 긴 폴 링,Iframe 흐름 등 여러 가지 방식 에서 가장 좋 은 방식 을 선택 하여 웹 실시 간 응용 을 실현 합 니 다.매우 편리 하고 인성 화 되 며 지원 하 는 브 라 우 저 는 최소 IE 5.5 에 달 합 니 다.
웹 소켓 설치 배치

npm install socket.io
서비스 감청
socket.io 의 서버 시작 은 매우 간단 합 니 다.socket.io 모듈 을 참조 합 니 다.

var io = require('socket.io');
그리고 listen 함 수 를 호출 하여 감청 포트 번 호 를 입력 하고 서비스 감청 을 시작 합 니 다.테스트 에 사용 할 80 포트 사용:

var io = require('socket.io')(80);
등록 이벤트

io.on('connection', function (socket) {
  socket.on('disconnect', function () {

  })
})
connection 사건 은 클 라 이언 트 가 서버 에 성공 적 으로 연결 되 었 을 때 발생 합 니 다.이 사건 이 발생 하면 저 희 는 사용자 가 서버 에 연결 하 는 정 보 를 수시로 파악 할 수 있 습 니 다.
클 라 이언 트 가 연결 을 성공 적 으로 만 들 었 을 때 connection 이벤트 의 리 셋 함수 에서 우 리 는 socket 에 자주 사용 하 는 이 벤트 를 등록 할 수 있 습 니 다.예 를 들 어 disconnect 이벤트,클 라 이언 트 연결 이 끊 기 는 것 이 트리거 입 니 다.이때 나 는 사용자 가 이미 떠 났 다 는 것 을 알 게 되 었 습 니 다.
웹 소켓 시작 서비스
지금까지 저 희 는 가장 간단 한 socket 서버 를 구축 하 였 습 니 다.브 라 우 저 에서 저희 서 비 스 를 방문 할 수 있 도록 서버 에 간단 한 웹 서버 를 구축 하여 브 라 우 저가 저희 클 라 이언 트 페이지 를 방문 할 수 있 도록 해 야 합 니 다.
편리 함 을 위해 저 희 는 node.js 에서 자주 사용 하 는 express 프레임 워 크 를 사용 하여 웹 서 비 스 를 실현 합 니 다.예 를 들 어 다음 과 같 습 니 다.

var express = require('express');
var app = express();
app.get('/', function (req, res) {
  res.status(200).send('    !')
});
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.on('connection', function (socket) {

});
server.listen(80);
WebSocket 클 라 이언 트 참조
서버 구축 이 완료 되 었 습 니 다.클 라 이언 트 가 어떻게 사용 해 야 하 는 지 살 펴 보 겠 습 니 다.
서버 가 실 행 된 후 루트 디 렉 터 리 에서 socket.io 의 클 라 이언 트 js 파일 을 동적 으로 생 성 합 니 다.클 라 이언 트 는 고정 경로/socket.io/socket.io.js 를 통 해 인용 을 추가 할 수 있 습 니 다.
먼저 웹 페이지 index.html 를 추가 하고 웹 페이지 에서 클 라 이언 트 js 파일 을 참조 합 니 다.

<script src="//cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>
웹 소켓 연결 서비스
클 라 이언 트 가 socket.io 클 라 이언 트 파일 을 성공 적 으로 불 러 오 면 전역 대상 io 를 가 져 옵 니 다.저 희 는 io.connect 함 수 를 통 해 서버 에 연결 요청 을 할 것 입 니 다.

var socket = io.connect('/');
socket.on('connect',function(){
  //    
});
socket.on('disconnect',function(data){
  //    
});
connect 함 수 는 url 인 자 를 받 아들 일 수 있 습 니 다.url 은 socket 서비스의 http 전체 주 소 를 받 아들 일 수 있 고 상대 경로 일 수도 있 습 니 다.생략 하면 현재 경 로 를 기본 으로 연결 합 니 다.서버 와 유사 하 게 클 라 이언 트 도 해당 하 는 이벤트 에 등록 하여 정 보 를 캡 처 해 야 합 니 다.다른 것 은 클 라 이언 트 연결 에 성공 한 사건 은 connect 입 니 다.
클 라 이언 트 가 어떻게 사용 하 는 지 알 게 되 었 습 니 다.다음은 웹 페이지 index.html 를 만 들 고 다음 과 같은 내용 을 추가 합 니 다(저장).

<html>
<head>
  <script src="//cdn.bootcss.com/socket.io/2.0.2/socket.io.js"></script>
  <script>
    window.onload = function(){
      var socket = io.connect('/');
      socket.on('connect',function(){
        document.write('    !');
      });
    };
  </script>
</head>
<body>
</body>
</html>
페이지 추가 가 끝 났 으 면 서버 app.js 에 경 로 를 추가 하여 테스트 페이지 에 접근 할 수 있 도록 해 야 합 니 다.

app.get('/index',function(req,res){
  res.sendFile('index.html',{root:__dirname});
});
웹 소켓 실시 간 통신
서버 와 클 라 이언 트 가 모두 구축 되 었 습 니 다.다음은 메 시 지 를 보 냅 니 다.
우리 가 성공 적 으로 연결 을 만 든 후에 우 리 는 socket 대상 의 send 함 수 를 통 해 서로 메 시 지 를 보 낼 수 있 습 니 다.예제-클 라 이언 트 가 서버 에 메 시 지 를 보 낼 수 있 습 니 다(index.html):

var socket = io.connect('/');
socket.on('connect',function(){
  //            'hello world!'
  socket.send('hello world!');
});
socket.on('message',function(data){
  alert(data);
});
연결 성공 후,우 리 는 서버 에 hello World 메 시 지 를 보 냅 니 다!,또한 socket 에 message 이 벤트 를 등 록 했 습 니 다.send 함수 에 대응 하 는 메 시 지 를 받 는 이벤트 입 니 다.서버 에서 클 라 이언 트 send 메 시 지 를 보 낼 때 저 희 는 message 이벤트 에서 보 낸 메 시 지 를 받 을 수 있 습 니 다.
서버 에서 클 라 이언 트 에 게 메 시 지 를 보 내 는 것 도 send 방식 을 통 해 예-서버 에서 클 라 이언 트 에 게 메 시 지 를 보 낼 수 있 습 니 다(app.js).

var io = require('scoket.io');
io.on('connection', function (socket) {
  socket.send('Hello World!');
  socket.on('message', function (data) {
    console.log(data);
  })
});
클 라 이언 트 와 마찬가지 로 서버 도 socket 에 message 이 벤트 를 등록 하여 클 라 이언 트 가 보 낸 메 시 지 를 받 아야 합 니 다.
WebSocket 메시지 보 내기
socket.io 는 통신 을 실현 하 는 데 쓰 이 는 만큼 정 보 를 어떻게 보 내 고 받 는 것 이 근본 이다.
socket.io 에서 emit 함 수 는 데 이 터 를 보 내 는 데 사 용 됩 니 다.저 희 는 send 방식 으로 정보의 상호 발송 을 실 현 했 습 니 다.사실은 send 함 수 는 emit 의 패키지 일 뿐 실제 적 으로 emit 를 사 용 했 습 니 다.send 함수 가 어떻게 실현 되 는 지 보 세 요.

function send(){
 var args = toArray(arguments);
 args.unshift('message');
 this.emit.apply(this, args);
 return this;
}
send 함수 에서 원래 의 인 자 를 가 져 오고 원래 의 기초 위 에 매개 변수 message 를 삽입 한 다음 에 emit 함 수 를 호출 합 니 다.send 함수 의 실현 을 통 해 우 리 는 emit 함수 의 용법 도 배 웠 습 니 다.여러 개의 매개 변수 가 있 습 니 다.첫 번 째 매개 변 수 는 사건 이름 입 니 다.수신 단 에 이 사건 을 등록 하면 과거 에 보 낸 정 보 를 받 을 수 있 습 니 다.사건 이름 은 자 유 롭 게 정의 할 수 있 고 서로 다른 장면 에서 우 리 는 서로 다른 사건 을 정의 하여 메 시 지 를 받 을 수 있 습 니 다.두 번 째 매개 변수 야 말로 보 낸 데이터 입 니 다.작업 원 리 를 잘 알 고 send 를 emit 함수 로 바 꾸 어 메 시 지 를 보 냅 니 다.

//app.js
io.on('connection',function(socket){
   socket.emit('message','    !');
   socket.on('message',function(data){
  });
});
WebSocket 서버 이벤트
사건 감청 은 통신 을 실현 하 는 기초 이기 때문에 socket.io 의 사건 을 충분히 이해 하고 정확 할 때 사용 하 는 방법 을 배 우 는 것 이 중요 하 다.일부 관건 적 인 상태 에서 socket.io 는 해당 하 는 사건 을 등록 할 수 있 습 니 다.사건 감청 을 통 해 우 리 는 이 사건 들 에 반응 할 수 있 습 니 다.자주 사용 하 는 사건 은 다음 과 같 습 니 다.
connection―클 라 이언 트 가 서버 에 성공 적 으로 연결 되 었 습 니 다.
message―클 라 이언 트 send 정 보 를 캡 처 합 니 다.
disconnect-클 라 이언 트 가 연결 을 끊 습 니 다.
오류 가 발생 하 다.
WebSocket 클 라 이언 트
서버 에 비해 클 라 이언 트 는 더 많은 감청 사건 을 제공 합 니 다.실시 간 응용 에서 저 희 는 이러한 사건 에 감청 을 등록 하고 반응 할 수 있 습 니 다.예 를 들 어 connect 는 사용자 의 연결 성공 을 알 리 고 disconnect 는 사용자 에 게 서 비 스 를 중단 하 라 고 알 릴 수 있 습 니 다.
connection―서버 에 성공 적 으로 연결 되 었 습 니 다.
연결 중 입 니 다.
disconnect―연결 을 끊다.
connect_failed―연결 실패.
error―연결 오류.
message―서버 send 의 정 보 를 감청 합 니 다.
reconnect_failed--재 접속 실패.
재연 결 에 성공 하 다.
reconnecting--다시 연결 되 고 있 습 니 다.
그러면 클 라 이언 트 socket 이 연결 을 시작 할 때의 순 서 는 어떻게 됩 니까?첫 번 째 연결 시 이벤트 트리거 순 서 는 connecting→connect 입 니 다.
연결 을 잃 었 을 때 이벤트 트리거 순 서 는 disconnect→reconnecting→connecting→reconnect→connect 입 니 다.
웹 소켓 네 임 스페이스
네 임 스페이스 는 정말 실 용적 이 고 사용 하기 좋 은 기능 이다.우 리 는 네 임 스페이스 를 통 해 서로 다른 방 을 나 눌 수 있 고 방 안의 방송 과 통신 은 방 이외 의 클 라 이언 트 에 영향 을 주지 않 습 니 다.
그럼 방 은 어떻게 만 듭 니까?서버 에서 of(")방식 으로 새로운 네 임 스페이스 를 구분 합 니 다.

io.of('chat').on('connection',function(socket){
});
예 를 들 어 저 희 는 chat 라 는 방 을 만 들 었 습 니 다.클 라 이언 트 는 다음 과 같은 방식 으로 지정 한 방 에 연결 할 수 있 습 니 다.

var socket = io.connect('/chat');
지정 한 방 에 연결 되 어 있 지만 서버 에서 도 자 유 롭 게 방 을 드 나 들 수 있 습 니 다.

socket.join('chat');//  chat  
socket.leave('chat');//  chat  
웹 소켓 방송 메시지
실시 간 응용 에서 방송 은 불가 또는 부족 한 기능 으로 socket.io 는 두 가지 서버 방송 방식 을 제공한다.
첫 번 째 방송 방식 은'전역 방송'이 라 고 할 수 있다.말 그대로 전역 방송 은 서버 에 연 결 된 모든 클 라 이언 트 가 방송의 정 보 를 받 는 것 이다.

socket.broadcast.emit('DATA',data);
그러나 실제 응용 장면 에서 우 리 는 모든 사용자 가 방송 정 보 를 받 지 않 아 도 된다.어떤 방송 정 보 는 일부 클 라 이언 트 에 게 만 보 낼 수 있다.예 를 들 어 특정한 방 안의 사용자 에 게 만 보 내 면 다음 과 같은 방식 을 사용 할 수 있다.

socket.broadcast.to('chat').emit('DATA',data);
중간 부품
socket.io 는 미들웨어 기능 을 제공 합 니 다.우 리 는 미들웨어 를 통 해 요청 을 예비 처리 할 수 있 습 니 다.예 를 들 어 인증:

io.use(function(socket, next){
 if (socket.request.headers.cookie) return next();
 next(new Error('Authentication error'));
});
예 를 들 어 중간 부품 을 통 해 인증 을 하고 쿠키 가 없 을 때 이상 을 던 지 는 것 을 보 여 준다.
전달 매개 변수
많은 응용 장면 에서 클 라 이언 트 가 연결 요청 을 할 때 파 라 메 터 를 전달 해 야 합 니 다.이런 파 라 메 터 는 인증,초기 화 설정 등 일 수 있 습 니 다.그러면 socket.io 가 연결 을 시작 할 때 파 라 메 터 를 어떻게 전달 합 니까?

var socket = io.connect('/');
connect 함수 가 연결 을 시작 하 는 매개 변 수 는 url 이기 때문에 매개 변 수 를 url 에 연결 하 는 것 을 생각 할 수 있 습 니 다.예 를 들 어http://xxxx?xx=xxxx그러나 안 타 깝 게 도 이것 은 통 하지 않 습 니 다.우 리 는 이런 방식 으로 인 자 를 전달 할 수 있 습 니 다.

var socket = io.connect('/',{ _query:'sid=123456' });
서버 에서 전 달 된 인 자 를 이렇게 가 져 올 수 있 습 니 다:

io.use(function(socket){
   var query = socket.request._query;
   var sid = query.sid; 
});
클 라 이언 트 가 전달 하 는 매개 변 수 는 json 대상 으로 해석 되 었 습 니 다.이 대상 은 바로 입 니 다.query。

좋은 웹페이지 즐겨찾기