JavaScript의 WebSocket 기술에 대한 자세한 설명

개요

HTTP 프로토콜은 상태 비저장 프로토콜입니다. 서버 자체에는 클라이언트를 식별할 수 있는 기능이 없습니다. 클라이언트와의 대화를 유지하려면 세션 및 쿠키와 같은 외부 메커니즘에 의존해야 합니다. 특정 클라이언트. 이는 특히 서버와 클라이언트가 지속적으로 데이터를 교환해야 하는 상황(예: 온라인 채팅)에서 불편함을 가져옵니다. 이 문제를 해결하기 위해 HTML5는 브라우저의 WebSocket API를 제안합니다.

WebSocket의 주요 기능은 서버와 클라이언트 간의 전이중 통신을 허용하는 것입니다. 예를 들어, HTTP 프로토콜은 이메일을 보내는 것과 약간 비슷하며, 보낸 후 상대방이 응답할 때까지 기다려야 합니다. WebSocket은 전화 통화와 같으며, 서버와 클라이언트가 동시에 서로 데이터를 보낼 수 있습니다. 시간과 그들 사이에는 지속적으로 열린 데이터 채널이 있습니다.

WebSocket 프로토콜은 Ajax 방식을 완전히 대체할 수 있으며 텍스트 및 바이너리 데이터를 서버에 보내는 데 사용할 수 있으며 "동일 도메인 제한"이 없습니다.

WebSocket은 HTTP 프로토콜을 사용하지 않고 자체 프로토콜을 사용합니다. 브라우저에서 발행한 WebSocket 요청은 다음과 유사합니다.

GET / HTTP/1.1
Connection: Upgrade
Upgrade: websocket
Host: example.com
Origin: null
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
Sec-WebSocket-Version: 13
위 헤더 정보를 보면 업그레이드용 HTTP 헤더가 있다는 것을 알 수 있습니다. HTTP1.1 프로토콜은 업그레이드 헤더 정보에 통신 프로토콜이 HTTP/1.1에서 항목에 지정된 프로토콜로 변경됨을 나타냄을 명시합니다. "연결: 업그레이드"는 브라우저가 가능한 경우 webSocket 프로토콜로 업그레이드하도록 서버에 알리는 것을 의미합니다. Origin은 브라우저 도메인 이름이 서버에서 허용하는 범위 내에 있는지 확인하는 데 사용됩니다. Sec-WebSocket-Key는 Base64로 인코딩된 16바이트 임의 문자열인 핸드셰이크 프로토콜에 사용되는 키입니다.

서버측 WebSocket 응답은

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Origin: null
Sec-WebSocket-Location: ws://example.com/

서버도 "Connection: Upgrade"를 사용하여 프로토콜이 변경해야합니다. Sec-WebSocket-Accept는 서버가 브라우저에서 제공하는 Sec-WebSocket-Key 문자열 뒤에 "258EAFA5-E914-47DA-95CA-C5AB0DC85B11" 문자열을 추가한 다음 sha-1의 해시 값을 가져오는 것을 의미합니다. 브라우저는 이 값을 확인하여 실제로 webSocket 요청에 응답한 대상 서버임을 증명합니다. Sec-WebSocket-Location은 통신을 위한 WebSocket URL을 나타냅니다.

WebSocket 프로토콜은 ws로 표시됩니다. 또한 암호화된 WebSocket 프로토콜을 나타내며 HTTPs 프로토콜에 해당하는 wss 프로토콜이 있습니다.
핸드셰이크가 완료되면 WebSocket 프로토콜이 TCP 프로토콜 위에 위치하여 데이터 전송을 시작합니다.

WebSocket 프로토콜에는 서버 지원이 필요합니다. 현재 더 널리 사용되는 구현은 node.js 기반의 Socket.io입니다. 자세한 구현 내용은 Wikipedia를 참조하세요. 브라우저 측면에서는 현재 모든 주류 브라우저가 WebSocket 프로토콜(IE 10+ 포함)을 지원합니다. 단, 휴대폰의 Opera Mini 및 Android 브라우저는 예외입니다.

클라이언트

브라우저에서 WebSocket 프로토콜을 처리하는 것은 다음 세 가지에 지나지 않습니다.

연결 설정 및 연결 해제
데이터 보내기 및 데이터 받기
처리 오류

연결 설정 및 연결 끊기

먼저 클라이언트는 창 개체에 WebSocket 속성이 있는지 확인하여 브라우저가 WebSocket을 지원하는지 확인해야 합니다.

if(window.WebSocket != undefined) {
 
 // WebSocket代码
 
}

그런 다음 서버와의 연결을 시작합니다(서버는 이 시스템의 1740 포트이고 서버는 1740 포트라고 가정합니다). ws 프로토콜을 사용해야 합니다).

if(window.WebSocket != undefined) {
 
 var connection = new WebSocket('ws://localhost:1740');
 
}

연결이 설정된 후 WebSocket 인스턴스 객체(즉, 위 코드의 연결)에는 ReadyState 속성이 있습니다. 현재 상태는 4가지 값을 취할 수 있습니다:

0: 연결 중
1: 연결 성공
2: 닫는 중
3: 연결 닫힘
핸드셰이크 프로토콜이 성공하면 ReadyState가 다음에서 변경됩니다. 0은 1이고 open 이벤트를 트리거한 다음 서버에 정보를 보낼 수 있습니다. open 이벤트에 대한 콜백 함수를 지정할 수 있습니다.

connection.onopen = wsOpen;

function wsOpen (event) {
console.log(‘Connected to: ‘ + event.currentTarget.URL);
}

WebSocket 연결을 닫으면 닫기 이벤트가 트리거됩니다.

connection.onclose = wsClose;

function wsClose () {
console.log(“Closed”);
}
 
connection.close();

데이터 보내기 및 받기

연결 후 설정되면 클라이언트는 send 메소드를 통해 서버에 데이터를 보냅니다.

connection.send(message);
문자열을 보내는 것 외에도 Blob 또는 ArrayBuffer 개체를 사용하여 이진 데이터를 보낼 수도 있습니다.

// 使用ArrayBuffer发送canvas图像数据
 
var img = canvas_context.getImageData(0, 0, 400, 320);
 
var binary = new Uint8Array(img.data.length);
 
for (var i = 0; i < img.data.length; i++) {
 
 binary[i] = img.data[i];
 
}
 
connection.send(binary.buffer);
// 使用Blob发送文件
var file = document.querySelector(‘input[type=”file”]&#39;).files[0];
connection.send(file);

클라이언트가 서버에서 보낸 데이터를 받으면 메시지 이벤트가 발생합니다. 메시지 이벤트에 대한 콜백 함수를 정의하여 서버에서 반환된 데이터를 처리할 수 있습니다.

connection.onmessage = wsMessage;

function wsMessage (event) {
console.log(event.data);
}

위 코드에서 콜백 함수 wsMessage의 매개변수는 이벤트입니다. 개체 이벤트 개체의 데이터 속성에는 서버에서 반환된 데이터가 포함됩니다.

바이너리 데이터를 수신한 경우 연결 개체의 형식을 blob 또는 arraybuffer로 설정해야 합니다.

connection.binaryType = 'arraybuffer';
 
connection.onmessage = function(e) {
 console.log(e.data.byteLength); // ArrayBuffer对象有byteLength属性
};

오류 처리

오류가 발생하면 브라우저는 WebSocket 인스턴스 객체의 오류 이벤트를 트리거합니다.

connection.onerror = wsError;

function wsError(event) {
console.log(“Error: “ + event.data);
}

服务器端

服务器端需要单独部署处理WebSocket的代码。下面用node.js搭建一个服务器环境。

var http = require('http');
 
var server = http.createServer(function(request, response) {});

   

假设监听1740端口。

server.listen(1740, function() {
 
 console.log((new Date()) + ' Server is listening on port 1740');
 
});

接着启动WebSocket服务器。这需要加载websocket库，如果没有安装，可以先使用npm命令安装。

var WebSocketServer = require('websocket').server;
 
var wsServer = new WebSocketServer({
 
 httpServer: server
 
});
   
WebSocket服务器建立request事件的回调函数。
var connection;wsServer.on(‘request', function(req){

connection = req.accept(‘echo-protocol', req.origin);
});

   

上面代码的回调函数接受一个参数req，表示request请求对象。然后，在回调函数内部，建立WebSocket连接connection。接着，就要对connection的message事件指定回调函数。

wsServer.on(‘request', function(r){
 
 connection = req.accept(‘echo-protocol', req.origin);

  

<span class="nx">connection</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">&#39;message&#39;</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">message</span><span class="p">)</span> <span class="p">{</span>
 <span class="kd">var</span> <span class="nx">msgString</span> <span class="o">=</span> <span class="nx">message</span><span class="p">.</span><span class="nx">utf8Data</span><span class="p">;</span>
 <span class="nx">connection</span><span class="p">.</span><span class="nx">sendUTF</span><span class="p">(</span><span class="nx">msgString</span><span class="p">);</span>
<span class="p">});</span>
});

   

最后，监听用户的disconnect事件。

connection.on('close', function(reasonCode, description) {
 
 console.log(connection.remoteAddress + ' disconnected.');
 
});

   

使用ws模块，部署一个简单的WebSocket服务器非常容易。

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8080 });
 
wss.on('connection', function connection(ws) {
 ws.on('message', function incoming(message) {
 console.log('received: %s', message);
 });
 
 ws.send('something');
});

   

Socket.io简介

Socket.io是目前最流行的WebSocket实现，包括服务器和客户端两个部分。它不仅简化了接口，使得操作更容易，而且对于那些不支持WebSocket的浏览器，会自动降为Ajax连接，最大限度地保证了兼容性。它的目标是统一通信机制，使得所有浏览器和移动设备都可以进行实时通信。

第一步，在服务器端的项目根目录下，安装socket.io模块。

$ npm install socket.io

第二步，在根目录下建立app.js，并写入以下代码（假定使用了Express框架）。

var app = require('express')();
var server = require('http').createServer(app);
var io = require('socket.io').listen(server);
 
server.listen(80);
 
app.get('/', function (req, res) {
 res.sendfile(__dirname + '/index.html');
});

   

上面代码表示，先建立并运行HTTP服务器。Socket.io的运行建立在HTTP服务器之上。

第三步，将Socket.io插入客户端网页。

b87e043dd6e28f8c8a3dcd50a2ffa1652cacc6d41bbb37262a98f745aa00fbf0

然后，在客户端脚本中，建立WebSocket连接。

var socket = io.connect('http://localhost:80');

由于本例假定WebSocket主机与客户端是同一台机器，所以connect方法的参数是http://localhost。接着，指定news事件（即服务器端发送news）的回调函数。

socket.on('news', function (data){
 console.log(data);
});

   

最后，用emit方法向服务器端发送信号，触发服务器端的anotherNews事件。

socket.emit('anotherNews');

请注意，emit方法可以取代Ajax请求，而on方法指定的回调函数，也等同于Ajax的回调函数。
第四步，在服务器端的app.js，加入以下代码。

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

上面代码的io.sockets.on方法指定connection事件（WebSocket连接建立）的回调函数。在回调函数中，用emit方法向客户端发送数据，触发客户端的news事件。然后，再用on方法指定服务器端anotherNews事件的回调函数。

不管是服务器还是客户端，socket.io提供两个核心方法：emit方法用于发送消息，on方法用于监听对方发送的消息。