WebSocket

最新推荐文章于 2018-05-07 16:53:42 发布

奋飛

最新推荐文章于 2018-05-07 16:53:42 发布

阅读量4.6k

点赞数 7

分类专栏：前端技术站文章标签： WebSocket 什么是WebSocket 搭建WebSocket服务器 ws node

本文链接：https://blog.csdn.net/ligang2585116/article/details/47259301

版权

前端技术站专栏收录该内容

58 篇文章 5 订阅

订阅专栏

一、概述

HTTP协议是一种无状态协议，服务器端本身不具有识别客户端的能力，必须借助外部机制，比如session和cookie，才能与特定客户端保持对话。

WebSocket的主要作用是，允许服务器端与客户端进行全双工（full-duplex）的通信。举例来说，HTTP协议有点像发电子邮件，发出后必须等待对方回信；WebSocket则是像打电话，服务器端和客户端可以同时向对方发送数据，它们之间存着一条持续打开的数据通道。

WebSocket协议完全可以取代Ajax方法，用来向服务器端发送文本和二进制数据，而且还没有“同域限制”。
WebSocket不使用HTTP协议，而是使用自己的协议。WebSocket与http协议一样都是基于TCP的，属于应用层的协议，所以他们都是可靠的协议。WebSocket在建立握手连接时，数据是通过http协议传输的，但是在建立连接之后，真正的数据传输阶段是不需要http协议参与的。

请求：

GET / HTTP/1.1
Connection: Upgrade		//表示浏览器通知服务器，如果可以，就升级到webSocket协议
Upgrade: websocket 		//表示将通信协议从HTTP/1.1转向该项所指定的协议
Host: example.com
Origin: null			//验证浏览器域名是否在服务器许可的范围内
Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==	//握手协议的密钥，是base64编码的16字节随机字符串
Sec-WebSocket-Version: 13

响应：

HTTP/1.1 101 Switching Protocols
Connection: Upgrade
Upgrade: websocket
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
Sec-WebSocket-Origin: null
Sec-WebSocket-Location: ws://example.com/	//表示进行通信的WebSocket网址

注意：WebSocket协议用ws表示。此外，还有wss协议，表示加密的WebSocket协议，对应HTTPS协议。

二、客户端

1. 建立连接和断开连接、发送数据和接收数据、处理错误。
2. WebSocket实例对象有一个readyState属性，表示目前的状态，可取4个值：
【0：正在连接；1：连接成功；2：正在关闭；3：连接关闭】
3. 客户端建立WebSocket流程：
（0）检测浏览器是否支持WebSocket
（1）握手协议成功以后，readyState就从0变为1，并触发open事件
（2）关闭WebSocket连接，会触发close事件
（3）客户端收到服务器发送的数据，会触发message事件
（4）连接建立后，客户端通过send方法向服务器端发送数据

if(window.WebSocket != undefined) {
	var ws = new WebSocket("ws://localhost:10010");
	ws.onopen = function(){
		console.log("Opened!");
		ws.send("I'm client,call server!!!");
	};
	ws.onclose = function(){
		console.log("over!!!");
	};
	ws.onmessage = function(event){
		console.log(event.data);
	};
	ws.onerror = function(error){
		console.log("Error: "+ err);
	}
}

三、服务器端

使用ws（https://www.npmjs.com/package/ws）模块部署简单的服务器。

var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 10010});
wss.on('connection', function(conn) {
    //console.log(conn);
    conn.on('message', function(message) {
        console.log('received: %s', message);
        conn.send("I'm server,received your infomation!!!");
    });
});

[转载请标明出处： http://blog.csdn.net/ligang2585116]