初次接触websocket，究竟它与http协议有何不同，
HTTP 协议有一个缺陷：通信只能由客户端发起，HTTP 协议做不到服务器主动向客户端推送信息。
这样说，如果我想服务器定时推送消息，比如说天气预报，每隔一段时间就会变化，如何在客户端获取最新信息。
之前是使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
缺点：轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。
websocket最大的特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。
- 数据格式比较轻量，性能开销小，通信高效。
- 可以发送文本，也可以发送二进制数据。
- 没有同源限制，客户端可以与任意服务器通信。
废话不多讲，直接上代码：
var ws = new WebSocket("[wss://echo.websocket.org](wss://echo.websocket.org/)");
ws.onopen = function(evt) {
console.log("Connection open ...");
ws.send("Hello WebSockets!");
};
ws.onmessage = function(evt) {
console.log( "Received Message: " + evt.data);
ws.close();
};
ws.onclose = function(evt) {
console.log("Connection closed.");
};
下面我们来分析会怎么输出：
1.onopen建立连接后输出connection open。
2.send发送一条消息，在onmessage事件里监听，evt.data输出 hello websockets。
3.close关闭连接，最后输出connection closed。
websocket状态
webSocket.readyState
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
我们可以在这些特殊时刻做许多事情
switch (ws.readyState) {
case WebSocket.CONNECTING:
// do something
break;
case WebSocket.OPEN:
// do something
break;
case WebSocket.CLOSING:
// do something
break;
case WebSocket.CLOSED:
// do something
break;
default:
// this never happens
break;
}
我们可以给每个事件添加多个函数：
ws.addEventListener('open', function (event) {
console.log('socket open')
});
ws.addEventListener('open', function (event) {
ws.send('Hello Server!');
});
代码示例
这样吧，我们下面给出一段示例代码，更能说明问题。
1.下面是一个点击切换的事件，控制socket的链接与释放。
function ToggleConnectionClicked() {
if (SocketCreated && (ws.readyState == 0 || ws.readyState == 1)) {
ws.close();
} else {
Log("准备连接到聊天服务器 ...");
try {
ws =
new WebSocket("ws://" + document.getElementById("Connection").value);
SocketCreated = true;
} catch (ex) {
Log(ex, "ERROR");
return;
}
document.getElementById("ToggleConnection").innerHTML = "断开";
ws.onopen = WSonOpen;
ws.onmessage = WSonMessage;
ws.onclose = WSonClose;
ws.onerror = WSonError;
}
};
2.各种事件函数。
function WSonOpen() {
Log("连接已经建立。", "OK");
$("#SendDataContainer").show("slow"); //消息发送窗口显示
};
function WSonMessage(event) {
Log(event.data);
};
function WSonClose() {
Log("连接关闭。", "ERROR");
document.getElementById("ToggleConnection").innerHTML = "连接";
$("#SendDataContainer").hide("slow");
};
function WSonError() {
Log("WebSocket错误。", "ERROR");
};
3.当用户按下发送按钮，客户端会调用WebSocket对象向服务器发送信息，并且这个消息会广播给所有的用户
function SendDataClicked()
{
if (document.getElementById("DataToSend").value != "") {
ws.send(document.getElementById("txtName").value + "说 :\"" +
document.getElementById("DataToSend").value + "\"");
document.getElementById("DataToSend").value = "";
}
};
数据类型
注意，服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。
ws.onmessage = function(event){
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer");
}
}
除了动态判断收到的数据类型，也可以使用binaryType属性，显式指定收到的二进制数据类型。
// 收到的是 blob 数据
ws.binaryType = "blob";
ws.onmessage = function(e) {
console.log(e.data.size);
};
// 收到的是 ArrayBuffer 数据
ws.binaryType = "arraybuffer";
ws.onmessage = function(e) {
console.log(e.data.byteLength);
};
可能有同学对blob和arraybuffer(二进制数组)不是很了解，这里我简单讲一下arraybuffer的用法。
ArrayBuffer对象代表储存二进制数据的一段内存，它不能直接读写，只能通过视图（TypedArray视图和DataView视图)来读写，视图的作用是以指定格式解读二进制数据。
var buf = new ArrayBuffer(32);
上面代码生成了一段32字节的内存区域，每个字节的值默认都是0。可以看到，ArrayBuffer构造函数的参数是所需要的内存大小（单位字节）。
为了读写这段内容，需要为它指定视图。DataView视图的创建，需要提供ArrayBuffer对象实例作为参数。
var buf = new ArrayBuffer(32);
var dataView = new DataView(buf);
dataView.getUint8(0) // 0
上面代码对一段32字节的内存，建立DataView视图，然后以不带符号的8位整数格式，读取第一个元素，结果得到0，因为原始内存的ArrayBuffer对象，默认所有位都是0。
ArrayBuffer有一个静态方法isView，返回一个布尔值，表示参数是否为ArrayBuffer的视图实例。这个方法大致相当于判断参数，是否为TypedArray实例或DataView实例。
var buffer = new ArrayBuffer(8);
ArrayBuffer.isView(buffer) // false
var v = new Int32Array(buffer);
ArrayBuffer.isView(v) // true
大家对这段感兴趣的话，可以点 这里.
下面展示了几种数据的发送：
// Sending String
connection.send('your message');
// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(100, 100, 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);
// Sending file as Blob
var file = document.querySelector('input[type="file"]').files[0];
connection.send(file);
我们可以截取canvas绘画的图像某一部分，通过二进制数组发送给服务器。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.rect(10, 10, 100, 100);
ctx.fill();
console.log(ctx.getImageData(50, 50, 100, 100));
// ImageData { width: 100, height: 100, data: Uint8ClampedArray[40000] }
下面分享几个小tip：
1.How to get the IP address of the client?
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws, req) {
const ip = req.connection.remoteAddress;
});
获取远程客户端ip。
2.How to detect and close broken connections?
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
function heartbeat() {
this.isAlive = true;
}
wss.on('connection', function connection(ws) {
ws.isAlive = true;
ws.on('pong', heartbeat);
});
const interval = setInterval(function ping() {
wss.clients.forEach(function each(ws) {
if (ws.isAlive === false) return ws.terminate();
ws.isAlive = false; // 断开
ws.ping('', false, true); //重新ping 如果可以ping通，会接受pong
});
}, 30000);
上面这个例子检测了与服务器通信的客户端，若是有链接异常的会被terminate。
3.How to send broadcast to all connected client
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
wss.on('connection', function connection(ws) {
ws.on('message', function(message) {
wss.broadcast(message);
}
}
wss.broadcast = function broadcast(msg) {
console.log(msg);
wss.clients.forEach(function each(client) {
client.send(msg); //这个有所疑问 为什么是send 这个时候不该是receive吗
});
};
server.listen(8080, function listening() {
console.log('Listening on %d', server.address().port);
});
上面是服务器接收了一个信息后，将该信息发送给所有与之建立连接的client。或许下面这个更适合。
var ws = require("ws");
global_counter = 0;
all_active_connections = {};
ws.createServer(function (websocket)
{
websocket.on('connect', function()
{
var id = global_counter++;
all_active_connections[id] = websocket;
websocket.id = id;
}).on('message', function (data) {
if (data == 'broadcast me!')
{
for (conn in all_active_connections)
all_active_connections[conn].write(data); // 这里用的write
}
}
}).on('close', function() {
delete all_active_connections[websocket.id];
});
}).listen(8080);
今天关于websocket的知识就讲解到这里，其实有很多资源可以去学习，socket.io也是一个很好的学习途径，如果有空我会做一期node.js配合socket的文章。
网友评论