Websocket即时通信应用开发 JS部分

对于我们一般做网站的人来说，即时通信是很重要的，比如客户下订单及时通知商家，在线客服聊天系统等，都需要用到这方面的技术。

那么我们如何去做这个通信呢？老实说，别人的方法有很多，对于整个系统和项目来说是很复杂的，但是我在这里也只能说些简单的了，大家可以发散下思维，往深度的方向考虑一点。

我用的WebSocket来做的一个在线客服的东西。这方面的东西我也研究了好长的时间，但是只要明白了他的原理和机制，很多的东西都可以迎刃而解。

在B/S架构的网页中，添加这么一段JS。
               //获取服务器的链接 这里我是需要做的是在url地址中传一个用户名，必须是英文的。拼装一个wss或是ws的URL
               if (window.location.protocol == 'http:') 

                       var urlinfo = window.location.href;
                       var userName = decodeURI(urlinfo.split("?")[1].split("=")[1]);
                        url = 'ws://' + window.location.host + "/ChatR/webSocket/" + userName;
               } else {
                      var urlinfo = window.location.href;
                      var userName = decodeURI(urlinfo.split("?")[1].split("=")[1]);
                      url = 'wss://' + window.location.host + "/ChatR/webSocket/" + userName;     //ChatR是项目名，webSocket是注解webSocket的类名，userName是参数
              }
             //创建服务器 这是一个创建ws服务器的一个过程。
             if ('WebSocket' in window) {
                      ws = new WebSocket(url);
              }
              //与服务器进行连接
             $(function() {
                        ws.onopen = function(evt) {
                               alert(' 连接已打开');
                         };
            });
 // 这里就是收发信息的过程了，接收服务器的消息
             ws.onmessage = function(evt) {
                        var evtJson = JSON.parse(evt.data);     //信息的传送以json数据格式传送
                        //客户连接时，接收服务器的传来的消息列表。
              if (evtJson.length != undefined) {

                        //客户连接消息，拼接客户列表
                         $ .each( evtJson, function(i, a) {
                                  $("#kefu").append(
                                                "<li id='"+a.kf+"li' style='color:#16CEBA;'><input type='radio' value='"
                                                + a.kf
                                                + "' name='radioKF' id='"
                                                + a.kf
                                                + "' onclick='connectKf(this)'>"
                                                + a.kf + "</li>");
                                   $("#msgs") .append(
                                                   "<div id='acpMsg"+a.kf+"'  class='Msg' style='display: none; border: 1px solid #CDE6FC;height:200px;width:700px;overflow-Y:auto;'></div>");
                                    })
                 } else if (evtJson.operation == "kf_connect_send") {

                                //客服上线的消息，拼接客服列表
                               if ($("#" + evtJson.kf).val() == undefined) {
                                         $("#kefu").append(
                                                        "<li id='"+evtJson.kf+"li' style='color:#16CEBA'><input type='radio' value='"
                                                         + evtJson.kf + "' name='radioKF' id='"
                                                         + evtJson.kf + "' onclick='connectKf(this)'>"
                                                         + evtJson.kf + "</li>");
                                            $("#msgs") .append( "<div id='acpMsg"+evtJson.kf+"'  class='Msg' style='display: none; border: 1px solid “+   

                                                                            ” #CDE6FC;height:200px;width:700px;overflow-Y:auto;'></div>");
                                 }
                } else if (evtJson.operation == "kf_connect_clsoe") {//客服下线时的消息
                                  $("#" + evtJson.kf + "li").remove();
                } else if (evtJson.operation == "kf_connect") {//客服连接成功消息。
                             $("#acpMsg1").append("<li style='list-style:none;'>"+evtJson.msg + "</li>\n");
                } else if (evtJson.operation == "message") {//回话消息，即双发发送聊天信息
                             embed.play();//提示语音
                             $("#acpMsg1").append("<li style='list-style:none;'>"+evtJson.content + "</li><br>");

                             //判断发送消息人是否在本页面中有显示
                             if ($("#" + evtJson.from).val() == undefined) {
                                           $("#kehu") .append(
                                                            "<li id='"+evtJson.from+"li' style='color:red;'><input type='radio' name='radioKU' value='"
                                                           + evtJson.from
                                                           + "' id='"
                                                           + evtJson.from
                                                           + "' onclick='connectKf(this)'>"
                                                           + evtJson.from + "</li>");
                             }
                             //判断当前的回话窗口是否是传来消息者
                             if ($("#acpMsg" + evtJson.from).val() != undefined) {//判断本页面是否有该聊天窗口
                                            $("#" + evtJson.from + "li").css("color", "red");
                                            $("#acpMsg" + evtJson.from).append("<li style='list-style:none;text-align: right;'>"+evtJson.content + "</li><br>");
                              } else {
                                            $("#msgs") .append(
                                   "<div id='acpMsg"+evtJson.from+"' class='Msg' style='display: none; border: 1px solid #CDE6FC;height:200px;width:700px;overflow-Y:auto;'></div>");
                                   $("#acpMsg" + evtJson.from).append("<li style='list-style:none;text-align: right;'>"+evtJson.content + "</li><br>");
                               }
                }
                scrollText();//控制滚动条
            };
             //关闭与服务器的链接
             ws.onclose = function(event) {
                     console.log('Socket 连接关闭，请稍候...');
              };
               //发送消息 json数据
              function send() {
                                   var req = {
                                              to : $("#to").val(),
                                     content : $("#sendMsg").val()
                                     };
                                    var encoded = $.toJSON(req);
                                    $("#acpMsg" + $("#nowhh").val()).append(
                                                                "<li style='list-style:none;'>我：" + $("#sendMsg").val() + "</li><br>");
                                    $("#sendMsg").val('');
                                    $("#" + $("#to").val() + "li").css("color", "#16CEBA");
                                    scrollText();
                                    if($("#nowhh").val()!=='1'&&$("#nowhh").val()!=''){
                                                       ws.send(encoded);
                                      }else{
                                                  alert('请选择你要发送消息的用户');
                                     }
  
               }
               //选中当前的客服账号
              function connectKf(kefu) {
                                       $("#" + $("#to").val() + "li").css("color", "#16CEBA");
                                       $("#to").val(kefu.value);
                                       //隐藏当前显示的回话窗口
                                       $("#acpMsg" + $("#nowhh").val()).css("display", "none");
                                       //打开回话窗口
                                       $("#acpMsg" + kefu.value).css("display", "block");
                                       $("#nowhh").val(kefu.value);
                                        //去除radio的样式
                                        $("#" + kefu.value + "li").css("color", "#16CEBA");
              }
              function scrollText() {
                            var height = $("#acpMsg" + $("#nowhh").val())[0].scrollHeight;
                             $("#acpMsg" + $("#nowhh").val()).scrollTop(height);
               }
              //当页面被刷新时，初始化参数
              function refresh(){
                          $("#nowhh").val('1');
                          $("#to").val('');
             }
             function screenShot(){
                      $.ajax({
                              url:'sshot',
                           type:'get',
                    dataType:'json',
                      success:function(data){
                                        alert(data); 
                        }
                        })
 }

这里的逻辑有点复杂，这是我做的一个简单的客服系统，里面有很多细节的东西需要注意，

  a.收发消息是以json数据格式来传递的，进行前后台的交互使用。

  b.与服务器之间的状态事件进行处理，连接（open）、收发消息（menssage）、关闭（close）、连接出错（error）

  c.在浏览器上使用websocket，浏览器必须是当前高版本，版本低的话会无法使用的。

   这里是js的部分，html和服务器代码请看下一篇文章。