本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程。本产品已经成熟稳定并投入商用。

在线演示环境:https://kf.shengxunwei.com 注意:演示环境仅供演示交流与评估,不保证 7x24 小时可用。

文章目录列表请点击这里


对于在线客服与营销系统,对浏览器的兼容性和支持至关重要。我在设计之初,就考虑了这个问题,访客端必须支持 IE8 以上的所有PC端和移动端浏览器。并且能够根据浏览器的片本,自动切换不同的能信方式,始终选择最优的方式与服务端通信。

此外,还需要考虑到对网络的波动的兼容,访客所使用的网络五花八门,使用手机时,APP随时会被切换到后台导致中断网络,或者访客本身所处的车库、电梯、郊外网络不佳,时断时续。系统必须能够合理的处理这些情况,做到:

  • 不中断会话
  • 不丢失消息。

这里存在几个技术难点需要注意:

  • IE8 和 IE9 不支持 WebSocket 通信,只能降级使用 Http Ajax 请求。
  • 短时间的网络中断,再次连接时,不可认为是新会话,必须能够接着进行未完成的会话。
  • 访客端页面的排版布局,必须完全兼容 IE8 和 IE9,做到美观一致。

本文我将详细的解释这些问题,以及如何实现对 IE8 的完全完美的兼容。

访客端在 IE8 下的效果:

客服端与使用 IE8 的访客进行交流:


首先判断用户的浏览器版本

首先我们能过 User-Agent 判断访客所使用的浏览器。

User-Agent通常格式:

Mozilla/5.0 (平台) 引擎版本 浏览器版本号

IE8 的 User-Agent:

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

IE9 的 User-Agent:

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

我们可以通过 JavaScript 从用户的浏览器中得到 User-Agent

  var ua = navigator.userAgent;

获得 User-Agent 之后,我们通过对内容的判断,就很容易知道用户使用的浏览器版本,从而为后续的工作做准备。

从 WebSocket 降级到 HTTP Ajax

当我们判断用用户的浏览器不支持 WebSocket 时,就需要对通信方式进行降级,我们使用 XMLHttpRequest 对象进行 HTTP 异步通信。

XMLHttpRequest 能够:

  • 在不重新加载页面的情况下更新网页
  • 在页面已加载后从服务器请求数据
  • 在页面已加载后从服务器接收数据
  • 在后台向服务器发送数据

通过一行简单的 JavaScript 代码,我们就可以创建 XMLHttpRequest 对象。

var xhr = new XMLHttpRequest();

该构造函数用于初始化一个 XMLHttpRequest 实例对象。在调用下列任何其他方法之前,必须先调用该构造函数,或通过其他方式,得到一个实例对象。

XMLHttpRequest 有一个 onreadystatechange 。它的值 (state_Change) 是一个函数的名称,当 XMLHttpRequest 对象的状态发生改变时,会触发此函数。状态从 0 (uninitialized) 到 4 (complete) 进行变化。在状态为 4 时,我们执行代码进行通信。

代码示例:

var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=new XMLHttpRequest();
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
} function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}

我们只需要在 xmlhttp.status 状态代码为 200 时,处理从服务器返回的数据即可。


本文对客服系统如何兼容 IE8 进行了简要的介绍,在接下来的文章中,我将具体解构服务端程序的结构和设计、客服端程序的结构和设计,敬请关注。


在线演示环境:https://kf.shengxunwei.com 注意:演示环境仅供演示交流与评估,不保证 7x24 小时可用。

联系QQ: 279060597

联系E-mail:C5118@outlook.com

最新文章

  1. poj 1192
  2. 微信小程序开发初体验--教你开发小程序
  3. mongodb sharding配置
  4. SpringMVC 架构
  5. DBA常用SQL之DDL生成语句
  6. OXPattern
  7. 【英语】Bingo口语笔记(80) - 记忆、忘记的表达
  8. Linux文件系统结构
  9. Cocos2D-X v3.0 alpha1环境搭建
  10. 关于iTunes随机播放和我所不知道的自己
  11. 移动端H5制作安卓和IOS的坑 持续更新...
  12. django 视图模式
  13. 解决hash冲突的三个方法
  14. 下载图片没有关闭http输入流导致下载超时
  15. javascript基础常识了解一下
  16. JS函数声明与定义,作用域,函数声明与表达式的区别
  17. org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[]
  18. Noip前的大抱佛脚----字符串
  19. 「PKUSC2018」最大前缀和
  20. Mike Gancarz:Linux/Unix设计思想

热门文章

  1. Linux下使用acme.sh申请和管理Let’s Encrypt证书
  2. 查找Command
  3. Jenkins+GitLab+SonnarQube搭建CI/CD全流程
  4. 记一次Goroutine与wg导致的问题
  5. Dubbo+Zookeeper(二)Dubbo架构
  6. python 2.7.11 环境安装
  7. Docker学习笔记之创建Ubuntu基础镜像
  8. 微信小程序API交互的自定义封装
  9. 洛谷P1972 [SDOI2009]HH的项链(树状数组)
  10. JVM 判断对象已死,实践验证GC回收