其实老早就觊觎 Socket 这碗美食了，在 WebSocket 发出后更是心潮澎湃...
奈何这需要后端同志的帮助，使得至今才得以品尝。（当然本文也只涉及前端部分）
以前想监听其他设备变化，大屏幕交互，还有客服，多设备游戏等，
用过轮询（特定的时间间隔请求一次），后来也受教使用长链接（后端实现链接 1s 内不断，断了再请求）
但总要为性能这事捏一把汗，
而 Socket/WebSocket 就是即时通信，就是能很好的完成上述需求呀，
啊哈哈哈，不禁笑出了声音...
好的，回归正题，先看封装代码
function Socket(url, options) {
var opt = $.extend({
onopen: function(e){},
whenGet: function(val){},
onreset: function(){},
beforeClose: function(){},
onclose: function(){}, // (注：此处已不能再传输，为关闭后运行)
}, options || {});
var wsImpl = window.WebSocket || window.MozWebSocket;
var socket = new wsImpl(url);
// 关闭或刷新页面时，也关闭 socket
var DispClose = true;
$(window).on('beforeunload', CloseEvent);
$(window).on('unload', UnLoadEvent);
function _close() {
opt.beforeClose.apply(this, arguments);
socket.close();
}
function CloseEvent() {
if (DispClose) return "是否离开当前页面?";
_close();
}
function UnLoadEvent() {
DispClose = false;
_close();
}
// WebSocket 本身事件
socket.onopen = function(){
opt.onopen.apply(this, arguments);
}
socket.onclose = function(){
opt.onclose.apply(this, arguments);
}
socket.onmessage = function(){
opt.whenGet.apply(this, arguments);
}
socket.onerror = function(e){
console.log(e);
}
// 外放的其他方法
return {
send: function(val) {
socket.send(val);
},
reset: function(){
socket = new wsImpl(url);
opt.onreset.apply(this);
},
close: _close,
};
}
演示地址： http://sum.kdcer.com/test/SocketGame/
技术难点：
1. 从后端那搞到 ws:// 格式的 url
2. 处理好 whenGet 的传值，可以看看演示的源码，这个就看需求，相当考逻辑了
但还有个小问题就是 socket 延时/主动断开的情况，beforeClose 就不运行了，也就不能传输告诉别人我挂了，这个很尴尬
敲黑板，WebSocket 是个好东西，大家快用起来吧，一起研究哈