先问自己几个问题
浏览器websocket一般写法
var URL = 'ws://localhost:8087';
var socket = new WebSocket(URL);
//监听 打开连接
socket.onopen(function(event){
console.log(event);
});
//监听 收到消息
socket.onmessage(function(event){
console.log(event);
});
//监听 连接断开
socket.onclose(function(event){
console.log(event);
});
//关闭连接
socket.close();
浏览器WebSocket能力检测
并不是所有浏览器都能“new WebSocket(URL)”,有写浏览器并不支持websocket,在你使用这种方式之前,最好做一下浏览器的能力检测。如果用户的浏览器不支持websocket写法。要么你改换其他方案来实施,要么你干脆啥也不做,告诉用户让他们换用其他现代浏览器。(如果你能告诉你的客户,让他们使用你指定的浏览器,这自然是最好的。)
// 浏览器能力检测,前提是WebSocket函数没有被覆盖
function hasWebSocket(){
return typeof WebSocket === 'function'?true:false;
}
对于不支持websocket对象的浏览器有什么解决方案?
简要设计
-
初始化
主要是websocket地址,创建websocket对象
-
业务处理函数
主要处理用户的操作,例如点击发送,接电话,挂点话等主动操作
-
事件处理函数
主要是处理服务端推送过来的事件,这部分接口留给第三方来实现
代码雏形
var softPhone = (function(){
//配置信息
var config = {
debug:true
};
//内部函数
var app = {
//日志输出
log:function(msg){
if(config.debug){
console.info(msg);
}
},
error:function(msg){
if(config.debug){
console.error(msg);
}
},
//事件派发
deliverEvent:function(e){
switch(e.type){
case 'createChat':app.createChat(e);break;
case 'receiveMsg':app.receiveMsg(e);break;
case 'closeChat':app.closeChat(e);break;
default:app.error('事件类型不存在');break;
}
},
//空白事件 创建聊天 该事件需要第三方通过softphone.on()事件覆盖本函数
createChat:function(e){
app.error('该事件还没有被完成!');
},
//空白事件 收到消息 该事件需要第三方通过softphone.on()事件覆盖本函数
receiveMsg:function(e){
app.error('该事件还没有被完成!');
},
//空白事件 聊天关闭 该事件需要第三方通过softphone.on()事件覆盖本函数
closeChat:function(e){
app.error('该事件还没有被完成!');
}
};
//公共接口
return {
//初始化
init:function(url){
var socket = new WebSocket(url);
socket.onopen = function(e){
app.log(e);
};
socket.onmessage = function(e){
app.log(e);
//事件派发
app.deliverEvent(e);
};
socket.onclose = function(e){
app.log(e);
};
socket.onerror = function(e){
app.log(e);
};
},
//添加事件处理函数
on:function(name,fn){
app[name]=fn;
},
//触发事件
trigger:function(e){
//只有在debug模式下才开启
if(config.debug){
app.deliverEvent(e);
}
},
//日志
log:function(msg){
app.log(msg);
},
//设置softphone的debug
setDebug:function(switcher){
config.debug = switcher || true;
},
//打电话接口
//to:对方号码
//from:本机号码
makeCall:function(opt){
}
};
})();
//第三方实现模块
softPhone.on('createChat',function(e){
softPhone.log('完成createChat');
});
softPhone.on('receiveMsg',function(e){
softPhone.log('完成receiveMsg');
});
softPhone.on('closeChat',function(e){
softPhone.log('完成closeChat');
});
深入
关于写js-sdk设计的资料
写在最后
我自己做过类似的两个项目,js写的比较不规范,虽然可以运行起来。希望通过自己的总结,可以把类似的项目做得更好。非常感谢大家的阅读,有什么不准确的地方,欢迎指正。