关于前端socket.io兼容性IE10以下乱码

第一次写博客,纯属记录自己遇到的坑,希望能帮助大家以及往后自己回顾下!

建立网页通讯的时候 大家一般用的是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'
    });
}
//因项目代码太多不方便全部贴出来。只贴一些主要的
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值