第一次写博客,纯属记录自己遇到的坑,希望能帮助大家以及往后自己回顾下!
建立网页通讯的时候 大家一般用的是websocket 。但是只支持主流浏览器,低版本IE不支持,安卓内置浏览器webview 也不支持websocket。所以socket.io是首选了。socket.io和websocket类似,我这里就不复制那些api及理论了,网上一大把。
下面进入实战代码:
前端建立socket连接,和websocket类似:
这种通讯页面不要用阻塞式弹窗
function WebSocketfn() {
// 验证socket连接是否出问题
try {
socket = io.connect('http://192.168.1.1:48065');
} catch (err) {
// showLog()方法为提示框,提示内容为文本内容
showLog("断线重连中,请稍后", 300, 1500);
}
}
把所有的连接socket都写成一个方法,方便后续重连等操作调用。
重点:socket在IE10以下接收和传输的数据会乱码,建立连接的时候 前台会向服务端发送一些参数,后台收到是乱码的,尽管你页面设置了编码格式,后台的日志文件收到的信息也是乱码的,我们增尝试在后台各种编码处理,还是解析不了。前端传的时候也不会乱码的,目前我们做的是 在前端传输前 用 Base64 进行编码,后台接收的时候 再用 Base64 解码,然后后向前台发送信息的时候 也进行 编码,前端再解码 就不会出现乱码问题了。
function initEventHandle() {
//连接服务成功
socket.on('connect',function(evnt) {
console.log("链接服务器成功!")
});
//链接登录返回
socket.on('message',function(event) {
var json= JSON.parse(Base64.decode(event)); //Base64 解码
//这里面就根据后台返回的方法ACK做对应的操作了。
//列:
if (json['method'] == "IM_CCS_LoginAck") {//登录ACK
if (json['retCode'] != 1) {
console.warn('登录失败');
socket.sendDisconnect();// 关闭socket
}else{
console.log('登录成功');
}
}
// 访客发送返回
if (json["method"] == "IM_CCS_SendMsgAck") {
console.log("发送返回", json["retMsg"]);
if (json['retCode'] != 1) {
showLog("发送信息失败");
}
}
// IM信息接收
if (json["method"] == "IM_CCS_ReceiveMsgEvt") {
console.log("信息接收", json);
}
});
//连接失败
socket.on('connect_failed',function(evnt) {
console.log(evnt);
console.log('网络出错!');
});
//断开链接
socket.on('disconnect',function(evnt) {
console.log("与服务器断开了链接!");
//根据需要判断是否需要重连
// 重连函数
});
}
//想要断开连接调用此方法
function sendDisconnect() {
socket.disconnect();
}
//在封装下发送信息的方法
//向服务器发送消息
function sendMessage(request) {
console.log("send message token:"+request);
console.warn(Base64.encode(request));
socket.emit('token', {
token : Base64.encode(request),
message : 'message token'
});
}
//因项目代码太多不方便全部贴出来。只贴一些主要的