HTML 5 WebSocket 기술 사용 에 대한 상세 한 설명
10130 단어 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。
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
WebSocket+spring 예제 demo 자세히 보기(sockJs 라이브러리 사용)예를 들어 Canvas, 로컬 저장소, 멀티미디어 프로그래밍 인터페이스, WebSocket 등이다.이 중'웹의 TCP'라고 불리는 웹소켓은 특히 개발자들의 주의를 끈다.WebSocket의 등장으로 브라우저가 Sock...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.