html5移动端webscoket实现在线聊天

向右看齐 2021-11-26 14:06 830阅读 0赞

页面效果图

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpdWp1Y2Fp_size_16_color_FFFFFF_t_70

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <meta name="viewport" content="width=device-width,height=device-height">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <meta name="format-detection" content="telephone=no">
  10.     <!--解决点击页面文本框导致页面放大-->
  11.     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  12.     <link rel="stylesheet" type="text/css" href="../font_Icon/iconfont.css">
  13.     <link rel="stylesheet" type="text/css" href="../font_Icon/iconfont2.css">
  14.    <link rel="stylesheet" type="text/css" href="../css/chat.css">
  15.     <script src="../js/HZRecorder.js"></script>
  16.      <script src="../js/common_audio.js"></script>
  17.          <link rel="stylesheet" href="../css/common_audio.css">
  18.     <script src="../js/mui.min.js"></script>
  19.       <!--标准mui.css-->
  20.         <link rel="stylesheet" href="../css/mui.css">
  21.          <link rel="stylesheet" href="../css/mui.min.css">
  22.              <!--App自定义的css-->
  23.         <style type="text/css">
  24.             .mui-preview-image.mui-fullscreen {
  25.                 position: fixed;
  26.                 z-index: 20;
  27.                 background-color: #000;
  28.             }
  29.             .mui-preview-header,
  30.             .mui-preview-footer {
  31.                 position: absolute;
  32.                 width: 100%;
  33.                 left: 0;
  34.                 z-index: 10;
  35.             }
  36.             .mui-preview-header {
  37.                 height: 44px;
  38.                 top: 0;
  39.             }
  40.             .mui-preview-footer {
  41.                 height: 50px;
  42.                 bottom: 0px;
  43.             }
  44.             .mui-preview-header .mui-preview-indicator {
  45.                 display: block;
  46.                 line-height: 25px;
  47.                 color: #fff;
  48.                 text-align: center;
  49.                 margin: 15px auto 4;
  50.                 width: 70px;
  51.                 background-color: rgba(0, 0, 0, 0.4);
  52.                 border-radius: 12px;
  53.                 font-size: 16px;
  54.             }
  55.             .mui-preview-image {
  56.                 display: none;
  57.                 -webkit-animation-duration: 0.5s;
  58.                 animation-duration: 0.5s;
  59.                 -webkit-animation-fill-mode: both;
  60.                 animation-fill-mode: both;
  61.             }
  62.             .mui-preview-image.mui-preview-in {
  63.                 -webkit-animation-name: fadeIn;
  64.                 animation-name: fadeIn;
  65.             }
  66.             .mui-preview-image.mui-preview-out {
  67.                 background: none;
  68.                 -webkit-animation-name: fadeOut;
  69.                 animation-name: fadeOut;
  70.             }
  71.             .mui-preview-image.mui-preview-out .mui-preview-header,
  72.             .mui-preview-image.mui-preview-out .mui-preview-footer {
  73.                 display: none;
  74.             }
  75.             .mui-zoom-scroller {
  76.                 position: absolute;
  77.                 display: -webkit-box;
  78.                 display: -webkit-flex;
  79.                 display: flex;
  80.                 -webkit-box-align: center;
  81.                 -webkit-align-items: center;
  82.                 align-items: center;
  83.                 -webkit-box-pack: center;
  84.                 -webkit-justify-content: center;
  85.                 justify-content: center;
  86.                 left: 0;
  87.                 right: 0;
  88.                 bottom: 0;
  89.                 top: 0;
  90.                 width: 100%;
  91.                 height: 100%;
  92.                 margin: 0;
  93.                 -webkit-backface-visibility: hidden;
  94.             }
  95.             .mui-zoom {
  96.                 -webkit-transform-style: preserve-3d;
  97.                 transform-style: preserve-3d;
  98.             }
  99.             .mui-slider .mui-slider-group .mui-slider-item img {
  100.                 width: auto;
  101.                 height: auto;
  102.                 max-width: 100%;
  103.                 max-height: 100%;
  104.             }
  105.             .mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {
  106.                 width: 100%;
  107.             }
  108.             .mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {
  109.                 display: inline-table;
  110.             }
  111.             .mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {
  112.                 display: table-cell;
  113.                 vertical-align: middle;
  114.             }
  115.             .mui-preview-loading {
  116.                 position: absolute;
  117.                 width: 100%;
  118.                 height: 100%;
  119.                 top: 0;
  120.                 left: 0;
  121.                 display: none;
  122.             }
  123.             .mui-preview-loading.mui-active {
  124.                 display: block;
  125.             }
  126.             .mui-preview-loading .mui-spinner-white {
  127.                 position: absolute;
  128.                 top: 50%;
  129.                 left: 50%;
  130.                 margin-left: -25px;
  131.                 margin-top: -25px;
  132.                 height: 50px;
  133.                 width: 50px;
  134.             }
  135.             .mui-preview-image img.mui-transitioning {
  136.                 -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
  137.                 transition: transform 0.5s ease, opacity 0.5s ease;
  138.             }
  139.             @-webkit-keyframes fadeIn {
  140.                 0% {
  141.                     opacity: 0;
  142.                 }
  143.                 100% {
  144.                     opacity: 1;
  145.                 }
  146.             }
  147.             @keyframes fadeIn {
  148.                 0% {
  149.                     opacity: 0;
  150.                 }
  151.                 100% {
  152.                     opacity: 1;
  153.                 }
  154.             }
  155.             @-webkit-keyframes fadeOut {
  156.                 0% {
  157.                     opacity: 1;
  158.                 }
  159.                 100% {
  160.                     opacity: 0;
  161.                 }
  162.             }
  163.             @keyframes fadeOut {
  164.                 0% {
  165.                     opacity: 1;
  166.                 }
  167.                 100% {
  168.                     opacity: 0;
  169.                 }
  170.             }
  171.             p img {
  172.                 max-width: 100%;
  173.                 height: auto;
  174.             }
  175.         </style>
  176.          <style type="text/css">
  177.         * {
  178.             margin: 0;
  179.             padding: 0;
  180.         }
  182.         html, body {
  183.             background: #fff;
  184.         }
  186.         .btn {
  187.             position: fixed;
  188.             bottom: 0;
  189.             width: 100%;
  190.             height: 60px;
  191.             background: #eee;
  192.         }
  194.         .btn input {
  195.             width: 100%;
  196.             height: 100%;
  197.             font: 20px/60px 'microsoft yahei';
  198.         }
  200.         .blackBoxSpeak {
  201.             width: 176px;
  202.             height: 176px;
  203.             position: absolute;
  204.             left: 0;
  205.             right: 0;
  206.             top: 0;
  207.             bottom: 0;
  208.             margin: auto;
  209.             background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
  210.             url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
  212.             background: rgba(0, 0, 0, .7);
  213.             display: none;
  214.             border-radius: 12px;
  215.         }
  217.         .blackBoxSpeakConent {
  218.             font: 14.4px '微软雅黑 Light';
  219.             position: absolute;
  220.             left: 0;
  221.             right: 0;
  222.             bottom: 12px;
  223.             display: block;
  224.             text-align: center;
  225.             width: 90%;
  226.             padding: 8px 0;
  227.             margin: auto;
  228.             color: #ffffff;
  229.             font-weight: 200;
  230.             border-radius: 4px;
  231.         }
  233.         .blackBoxPause {
  234.             width: 176px;
  235.             height: 176px;
  236.             position: absolute;
  237.             left: 0;
  238.             right: 0;
  239.             top: 0;
  240.             bottom: 0;
  241.             margin: auto;
  242.             background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,
  243.             url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;
  245.             background: rgba(0, 0, 0, .7);
  246.             display: none;
  247.             border-radius: 12px;
  248.         } 
  250.         .blackBoxPauseContent {
  251.             font: 14.4px '微软雅黑 Light';
  252.             position: absolute;
  253.             left: 0;
  254.             right: 0;
  255.             bottom: 12px;
  256.             display: block;
  257.             text-align: center;
  258.             width: 90%;
  259.             padding: 8px 0;
  260.             margin: auto;
  261.             color: #ffffff;
  262.             font-weight: 200;
  263.             border-radius: 4px;
  264.         }
  265.     </style>    
  266.      <script type="text/javascript" src="../js/jquery.min.js"></script>     
  267.      <script type="text/javascript">
  268.          mui.init();
  269.          window.addEventListener('refresh', function(e){//执行刷新
  270.              if(e.detail.id==1){
  271.                   location.reload();
  272.                  }
  273.             });
  274.      //聊天记录
  275.     var chatRecord;
  276.     //好友手机号
  277.     var ToUserId ;
  278.     //名称
  279.     var toName;
  280.     //本人手机号
  281.     var UserId;
  282.     //本人名字
  283.     var name ;
  284. var msg_type;
  285.     var websocket = null;
  286.     mui.plusReady(function () {
  287.          name =plus.storage.getItem("name");
  288.         plus.nativeUI.closeWaiting();
  289.         mui.currentWebview.show(); 
  290.           var self = plus.webview.currentWebview();
  291.           ToUserId = ""+self.ToUserId;//获得参数
  292.           toName = self.Name;
  293.           console.log(toName);
  294.           $(".ChatInfoName").html("<font color=\"#000000\">"+toName+"</font>");
  295.           if(plus.storage.getItem("chatback")!=null){
  296.               var img=plus.storage.getItem("chatback");
  297.                $(".chatBox-info").css("background-image","url("+img+")");
  298.           }
  299.           console.log("ToUserId----"+ToUserId);
  300.           plus.storage.setItem("chating",ToUserId);
  301.           UserId=plus.storage.getItem("username");
  302.           console.log("UserId----"+UserId);
  303.         if(plus.storage.getItem(ToUserId)==null){
  304.             plus.storage.setItem(ToUserId,"");
  305.             //alert('创建成功');
  306.         }else{
  307.             //alert('已经创建成功');
  308.             chatRecord=plus.storage.getItem(ToUserId);
  309.             //alert(chatRecord);
  310.             $(".chatBox-content-demo").append(chatRecord);
  311.             $(document).ready(function () {
  312.                 $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
  313.             });
  314.         }
  316.     //判断当前浏览器是否支持WebSocket
  317.     if ('WebSocket' in window) {
  318.         websocket = new WebSocket("ws://192.168.1.18:8080/xgh_logistics/websocket/"+UserId);
  319.     /* websocket = new WebSocket("ws://61.163.34.143:8090/zzdy_oa/websocket");*/
  320.     } 
  321.     else {
  322.         alert('当前浏览器 Not support websocket')
  323.     }
  324.      //连接发生错误的回调方法
  325.     websocket.onerror = function () {
  326.         console.log("通信连接发生错误");
  327.        // setMessageInnerHTML("WebSocket连接发生错误",msg_type);
  328.     };
  329.     //连接成功建立的回调方法
  330.     websocket.onopen = function () {
  331.         //setMessageInnerHTML("WebSocket连接成功",msg_type);
  332.         console.log("WebSocket连接成功-------");
  333.          /* var Content='{"UserId":"'+UserId+'","ToUserId":"'+ToUserId+'","Content":"WebSocket连接成功","time":"'+time+'"}';//字符串中的属性要严格的加上引号
  334.              websocket.send(Content);*/
  335.     }
  336.     //接收到消息的回调方法
  337.     websocket.onmessage = function (event) {
  338.         var str=event.data;
  339.         var obj = JSON.parse(str);;
  340.         console.log("发送方--"+obj.UserId);
  341.         console.log("接收方---"+obj.ToUserId);
  342.         console.log("消息内容"+obj.Content);
  343.         console.log("消息类型"+obj.type);
  344.         console.log("消息类型"+obj.time);
  345.         msg_type=obj.type;
  346.          var audio_Time="test";
  347.         if(msg_type=="audio"){
  348.             audio_Time=obj.audio_time;
  349.         }
  350.         if(ToUserId==obj.UserId){
  351.         setMessageInnerHTML(obj.Content,obj.time,msg_type,audio_Time);
  352.       }
  353.     }
  355.     //连接关闭的回调方法
  356.     websocket.onclose = function () {
  357.              console.log("WebSocket连接关闭");
  358.         //setMessageInnerHTML("WebSocket连接关闭");
  359.     }
  361.     //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
  362.     window.onbeforeunload = function () {
  363.         closeWebSocket();
  364.     }
  366.     //将消息显示在网页上
  367.     function setMessageInnerHTML(innerHTML,msg_Time,msg_type,audio_Time) {
  368.         var content=null;
  369.         if(msg_type=="image"){
  370.           content= "<div class='clearfloat'><div class='author-name'><small class='chat-date'>"+msg_Time+"</small></div><div class='left'><div class='chat-avatars' style='font-size: 75%;text-align:center;line-height:0.7rem;background-color: #007AFF;width:0.7rem;height: 0.7rem;border-radius: 100%;color: #FFFFFF;margin-top: -5px;'>"+toName+"</div><div class='chat-message'><img src='"+innerHTML+"' data-preview-src='' data-preview-group='1' alt=''/></div></div></div>" 
  371.        // document.getElementById('message').innerHTML += innerHTML + '<br/>';
  372.         }if(msg_type=="txt"||msg_type==null){
  373.              content= "<div class='clearfloat'><div class='author-name'><small class='chat-date'>"+msg_Time+"</small></div><div class='left'> <div class='chat-avatars' style='font-size: 75%;text-align:center;line-height:0.7rem;background-color: #007AFF;width:0.7rem;height: 0.7rem;border-radius: 100%;color: #FFFFFF;margin-top: -5px;'>"+toName+"</div><div class='chat-message'>"+innerHTML+"</div></div></div>"; 
  374.              console.log("----"+content);
  375.         }if(msg_type=="audio"){
  376.             var msg="<div class='add_yuyin'><div class='r_yuyin' onclick='playaudio(this)' style='width:60px' data-time='44'>"+audio_Time+"\" <input style='display:none'  value='"+innerHTML+"'/><s></s></div></div>";
  377.             content="<div class='clearfloat'><div class='author-name'><small class='chat-date'>"+msg_Time+"</small></div><div class='left'> <div class='chat-avatars' style='font-size: 75%;text-align:center;line-height:0.7rem;background-color: #007AFF;width:0.7rem;height: 0.7rem;border-radius: 100%;color: #FFFFFF;margin-top: -5px;'>"+toName+"</div><div class='chat-message'>"+msg+"</div></div></div>" ;
  378.             console.log("http---"+content);
  379.         }
  380.         addChatRecord(content);
  381.         //新消息提示
  382.        startPlay();
  383.       $(".chatBox-content-demo").append(content);
  384.         $(document).ready(function () {
  385.                 $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
  386.             });
  388.      }
  389.      //关闭WebSocket连接
  390.     function closeWebSocket() {
  391.         websocket.close();
  392.     }
  393.         })
  396. /*    if(window.plus){  
  397.     // 在这里调用5+ API  
  398.     }else{// 兼容老版本的plusready事件  
  399.     document.addEventListener('plusready',function () {  
  401.         }
  402.       },false); 
  403.      }*/
  405.     /**
  406.  * @param {Object} chat_record     聊天文本
  407.  */
  408.     function addChatRecord(chat_record){
  409.             //console.log(chat_record);
  410.             chatRecord=plus.storage.getItem(ToUserId);
  411.             console.log("-++++-------"+ToUserId);
  412.             chatRecord+=chat_record;
  413.             console.log("-------"+chatRecord);
  414.             plus.storage.setItem(ToUserId,chatRecord);
  415.     }
  419.     /**  
  420.  * 播放音频  
  421.  * @param {Object} path  
  422.  */  
  423.  var player;
  424. function playAudio (id,path) {  
  425.     if(player!=null) //如果存在  
  426.     {  
  427.     player.stop(); //停止正在播放的音频，  
  428.         $(".r_yuyin").find("s").removeClass("bofang");
  429.         player=null;
  430.     }  else{
  431.      $(id).find("s").addClass("bofang");
  432.     player = plus.audio.createPlayer(path);
  433.     player.play(function(){  
  434.          $(id).find("s").removeClass("bofang");
  435.       //  mui.toast("播放完成");  
  436.     }, function(e) {  
  437.        // mui.toast("播放失败");  
  438.     });  
  439.     }
  441. }  
  443.     var dshiqi = null;
  444.     var audiotime;
  445.     var audioStatus;
  447.     function playaudio(id) {
  448.                  var url = $(id).find("input").val();
  449.                 audioStatus = plus.audio.createPlayer(url);
  450.                 //  var len=  audioStatus.getBuffered();
  451.                 //$(id).find("s").removeClass("bofang");
  452.               playAudio(id,url);
  454.    }
  455. /**  
  456.  * base64字符串转成语音文件(参考http://ask.dcloud.net.cn/question/16935)  
  457.  * @param {Object} base64Str  
  458.  * @param {Object} callback  
  459.  */  
  460. function dataURL2Audio (base64Str, callback) {  
  461.     var base64Str = base64Str.replace('data:audio/amr;base64,','');  
  462.     var audioName = (new Date()).valueOf() + '.amr';  
  464.     plus.io.requestFileSystem(plus.io.PRIVATE_DOC,function(fs){  
  465.         fs.root.getFile(audioName,{create:true},function(entry){  
  466.             // 获得平台绝对路径  
  467.             var fullPath = entry.fullPath;  
  468.             if(mui.os.android){    
  469.                 // 读取音频  
  470.                 var Base64 = plus.android.importClass("android.util.Base64");  
  471.                 var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");  
  472.                 try{  
  473.                     var out = new FileOutputStream(fullPath);  
  474.                     var bytes = Base64.decode(base64Str, Base64.DEFAULT);  
  475.                     out.write(bytes);   
  476.                     out.close();  
  477.                     // 回调  
  478.                     callback && callback(entry);  
  479.                 }catch(e){  
  480.                     console.log(e.message);  
  481.                 }  
  482.             }else if(mui.os.ios){  
  483.                 var NSData = plus.ios.importClass('NSData');  
  484.                 var nsData = new NSData();  
  485.                 nsData = nsData.initWithBase64EncodedStringoptions(base64Str,0);  
  486.                 if (nsData) {  
  487.                     nsData.plusCallMethod({writeToFile: fullPath,atomically:true});  
  488.                     plus.ios.deleteObject(nsData);  
  489.                 }  
  490.                 // 回调  
  491.                 callback && callback(entry);  
  492.             }  
  493.         })  
  494.     })  
  495. }  
  497.     //发送消息
  498.   /*  function send() {
  499.         var message = document.getElementById('text').value;
  500.         websocket.send(message);
  501.     }*/
  502.      </script>
  505. </head>
  506. <body>
  507. <div id="content" class="content">
  508. <div class="chatContainer">
  509.     <div class="chatBtn">
  510.         <i class="iconfont icon-xiaoxi1"></i>
  511.     </div>
  513.     <div class="chatBox" ref="chatBox">
  514.         <div class="chatBox-head">
  515.             <div class="chatBox-head-two">
  516.                 <div class="chat-return" style="color: #000000;"><div class="mui-icon mui-icon-back"></div></div>
  517.                 <div class="chat-people">
  518.                     <div class="ChatInfoName" style="width: 100%;font;position: absolute;left: 39%;"></div>
  520.                 </div>
  521.                  <div class="ChatIcon">
  522.                 <div onclick="chatChoose()"  class="mui-icon mui-icon-phone" style="color: #000000;"></div>  
  523.                 <div onclick="claer_chat()"  class="mui-icon mui-icon-bars" style="color: #000000;"></div>
  524.                 </div>
  525.               <!-- <div class="chat-close">关闭</div>-->
  526.             </div>
  527.         </div>
  529.         <div class="chatBox-info">
  530.        <!--  <audio controls autoplay src="http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a?tflag=1546606800&pin=97bb2268ae26c20fe093fd5b0f04be80#.mp3"></audio>-->
  531.             <div class="chatBox-kuang" ref="chatBoxkuang">
  532.                 <div class="chatBox-content">
  533.                     <div style="display: none;"><audio controls autoplay></audio> </div>      
  534.                     <div class="chatBox-content-demo" id="chatBox-content-demo">
  538.                     </div>
  539.                 </div>
  541.                 <div class="chatBox-send">
  542.                     <div class="div-textarea" contenteditable="true"></div>
  543.                     <div>
  544.                         <button id="bt_recoding" class="btn-default-styles">
  545.                             <i class="mui-icon mui-icon-mic"></i>
  546.                         </button>
  547.                         <label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles">
  548.                             <input type="file" onchange="selectImg(this)" accept="image/*" name="file" id="inputImage" class="hidden"  capture="camera">
  549.                            <i class="mui-icon mui-icon-image"></i>
  550.                         </label>
  551.                         <button id="chat-fasong" class="btn-default-styles"><i class="fasong">发送</i><!--<i class="iconfont icon-fasong" style="width: px;"></i>-->
  552.                         </button>
  553.                     </div>
  554.                 </div>
  555.             </div>
  556.         </div>
  557.     </div>
  558. </div>
  559. </div>
  560. <!-- 中间黑框 录音状态 -->
  561. <div class="blackBoxSpeak">
  562.     <p class="blackBoxSpeakConent">手指上划，取消发送</p>
  563. </div>
  565. <!-- 中间黑框 暂停状态 -->
  566. <div class="blackBoxPause">
  567.     <p class="blackBoxPauseContent" style="background: red">松开手指， 取消发送</p>
  568. </div>
  569. <script>
  571.   function Time(){
  572.       var date=new Date();
  573.   var year=date.getFullYear();//当前年份
  574.     var month=date.getMonth();//当前月份
  575.     var data=date.getDate();//天
  576.     var hours=date.getHours();//小时
  577.     var minute=date.getMinutes();//分
  578.     var second=date.getSeconds();//秒
  579.     var time=year+"-"+fnW((month+1))+"-"+fnW(data)+" "+fnW(hours)+":"+fnW(minute)+":"+fnW(second);
  580.     console.log("time---"+time);
  581.     return time;
  582.    }
  583.     //补位 当某个字段不是两位数时补0
  584.     function fnW(str){
  585.     var num;
  586.     str>9?num=str:num="0"+str;
  587.     return num;
  588.     } 
  589.     screenFuc();
  590.     function screenFuc() {
  591.         var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度
  592.         //屏幕小于768px时候,布局change
  593.         var winWidth = $(window).innerWidth();
  594.         if (winWidth <= 768) {
  595.             var totalHeight = $(window).height(); //页面整体高度
  596.             $(".chatBox-info").css("height", totalHeight - topHeight);
  597.             var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度
  598.             //中间内容高度
  599.             $(".chatBox-content").css("height", infoHeight - 46);
  600.             $(".chatBox-content-demo").css("height", infoHeight - 66);
  602.             $(".chatBox-list").css("height", totalHeight - topHeight);
  603.             $(".chatBox-kuang").css("height", totalHeight - topHeight);
  604.             $(".div-textarea").css("width", winWidth - 150);
  605.         } else {
  606.             $(".chatBox-info").css("height", 495);
  607.             $(".chatBox-content").css("height", 448);
  608.             $(".chatBox-content-demo").css("height", 448);
  609.             $(".chatBox-list").css("height", 495);
  610.             $(".chatBox-kuang").css("height", 495);
  611.             $(".div-textarea").css("width", 260);
  612.         }
  613.     }
  614.     (window.onresize = function () {
  615.         screenFuc();
  616.     })();
  620.     //返回列表
  621.     $(".chat-return").click(function () {
  622.         plus.storage.removeItem("chating");
  623.         mui.back();
  624.      /* window.history.back();*/
  625.     });
  626.     //点击选择照片自动触发input图片上传
  627.     $("#chat-tuxiang").click(function () {
  628.         //$("#inputImage").click();
  629.         document.getElementById("inputImage").click();
  630.     });
  632.     //      发送信息
  633.     $("#chat-fasong").click(function () {
  634.         var textContent = $(".div-textarea").html()/* resplace(/[\n\r]/g, '<br>') */;
  635.         if (textContent != "") {
  636.             var chatdiv="<div class=\"clearfloat\">" +
  637.                 "<div class=\"author-name\"><small class=\"chat-date\">"+Time()+"</small> </div> " +
  638.                 "<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +
  639.                 "<div class=\"chat-avatars\" style=\"font-size: 75%;text-align:center;line-height:0.7rem;background-color: #007AFF;width:0.7rem;height: 0.7rem;border-radius: 75%;color: #FFFFFF;margin-top:-5px\">"+name+"</div> </div> </div>";
  640.            console.log("============="+chatdiv);
  641.            $(".chatBox-content-demo").append(chatdiv);
  642.             //发送后清空输入框
  643.             $(".div-textarea").html("");
  644.             //聊天框默认最底部
  645.             $(document).ready(function () {
  646.                 $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
  647.             });
  648.              // out.println(textContent); 
  649.              addChatRecord(chatdiv);
  650.               var Content='{"UserId":"'+UserId+'","FromUserName":"'+name+'","ToUserId":"'+ToUserId+'","Content":"'+textContent+'","type":"txt","time":"'+Time()+'"}';//字符串中的属性要严格的加上引号
  651.              websocket.send(Content);
  653.         }
  654.     });
  656.    //通过画布降低上传图片像素
  657.       var  canvas = document.createElement("canvas");
  658.        var  ctx = canvas.getContext('2d');
  659.     //      发送图片
  660.     function selectImg(pic) {
  661.         if (!pic.files || !pic.files[0]) {
  662.             return;
  663.         }
  664.         var reader = new FileReader();
  665.         var images=new Image();
  666.         reader.onload = function () {
  667.               var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，
  668.                 images.src=url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片
  669.            var chatImg="<div class=\"clearfloat\">" +
  670.                 "<div class=\"author-name\"><small class=\"chat-date\">"+Time()+"</small> </div> " +
  671.                 "<div class=\"right\"> <div class=\"chat-message\"><img src=" + images.src + " data-preview-src='' data-preview-group='1'></div> " +
  672.                 "<div class=\"chat-avatars\" style=\"font-size: 75%;text-align:center;line-height:0.7rem;background-color: #007AFF;width:0.7rem;height: 0.7rem;border-radius: 100%;color: #FFFFFF;margin-top: -5px;\">"+name+"</div> </div> </div>";
  673.           addChatRecord(chatImg);
  674.           $(".chatBox-content-demo").append(chatImg);
  675.             //聊天框默认最底部
  676.             $(document).ready(function () {
  677.                 $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
  678.             });
  679.         };
  680.             images.onload=function(){
  681.                   var w = images.naturalWidth,
  682.                                 h = images.naturalHeight;
  683.                             canvas.width = w;
  684.                             canvas.height = h;
  685.                             ctx.drawImage(images, 0, 0, w, h, 0, 0, w, h);
  686.                             fileUpload();
  687.             };
  688.         reader.readAsDataURL(pic.files[0]);
  690.     }
  692.     function fileUpload() {
  693.             var data = canvas.toDataURL("image/jpeg",0.3);
  694.              console.log("img------"+data);
  695.           var Content='{"UserId":"'+UserId+'","FromUserName":"'+name+'","ToUserId":"'+ToUserId+'","Content":"'+data+'","type":"image","time":"'+Time()+'"}';//字符串中的属性要严格的加上引号
  696.              websocket.send(Content);
  697.     }
  699. </script>
  700. </body>
  701.     <script src="../js/mui.zoom.js"></script>
  702.     <script src="../js/mui.previewimage.js"></script>
  703.     <script>
  704.         mui.previewImage();
  705.     </script>
  706. </html>
  708. <script type="text/javascript">
  709.     var MIN_SOUND_TIME = 800;
  710.      var startTimestamp = null;
  711.      var stopTimestamp = null;
  712.       // 开始录音
  713.         var r;
  714.         //语音path
  715.         var amr;
  716.         //判断是否发送语音
  717.         var IsSendAudio=true;
  718.         function startRecord(){
  719.         //    alert("开始录音");
  720.             startTimestamp = (new Date()).getTime();
  721.             r = plus.audio.getRecorder();
  722.             r.record( {filename:"_doc/audio/"}, function (p) {
  723.                 //alert("录音成功");
  724.                 amr=p;
  725.                 stopTimestamp = (new Date()).getTime();
  726.             if(IsSendAudio==true){
  727.                 if (stopTimestamp - startTimestamp < MIN_SOUND_TIME) {
  728.                     mui.toast("按键时间太短");
  729.                 }else{
  730.                 Audio2dataURL(amr);
  731.                 }
  732.            }
  733.             }, function ( e ) {
  734.                 alert( "Audio record failed: " + e.message );
  735.             } );
  736.             }
  737.         // 停止录音
  738.         function stopRecord(){
  739.             r.stop();
  740.         }
  742.         function startPlay(){
  743.             var p= plus.audio.createPlayer("../music/tips.mp3");
  744.             //alert("p"+p);
  745.             p.play(function(){
  746.                 //alert("播放完毕");
  747.             })
  748.         } 
  749.         /**  
  750.  * 录音语音文件转base64字符串  
  751.  * @param {Object} path  
  752.  */  
  753. function Audio2dataURL (path) {  
  754.     plus.io.resolveLocalFileSystemURL(path, function(entry){  
  755.         entry.file(function(file){  
  756.             var reader = new plus.io.FileReader();  
  757.             reader.onloadend = function (e) {  
  758.                 var data=e.target.result;
  759.                 stopTimestamp = (new Date()).getTime();
  760.                 var times=((stopTimestamp-startTimestamp)/1000).toFixed(1);
  761.                 console.log("------"+e.target.result);  
  762.                 var chataudio="<div class=\"clearfloat\">" +
  763.                 "<div class=\"author-name\"><small class=\"chat-date\">"+Time()+"</small> </div> " +
  764.                 "<div class=\"right\"> <div class=\"chat-message\">  <div class=\"add_yuyin\"><div class=\"r_yuyin\" onclick=\"playaudio(this)\" style=\"width:60px;color:white\" >"+times+"\"<input style=\"display:none\"  value='"+amr+"'/><s></s></div></div></div>" +
  765.                "<div class=\"chat-avatars\" style=\"font-size: 75%;text-align:center;line-height:0.7rem;background-color: #007AFF;width:0.7rem;height: 0.7rem;border-radius: 100%;color: #FFFFFF;margin-top:-5px\">"+name+"</div> </div> </div>";
  767.             addChatRecord(chataudio);
  768.             $(".chatBox-content-demo").append(chataudio);
  770.             //聊天框默认最底部
  771.             $(document).ready(function () {
  772.                 $("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);
  773.             });
  774.                  var Content='{"UserId":"'+UserId+'","FromUserName":"'+name+'","ToUserId":"'+ToUserId+'","Content":"'+data+'","type":"audio","time":"'+Time()+'","audio_time":"'+times+'"}';//字符串中的属性要严格的加上引号
  775.                  websocket.send(Content);
  776.             };  
  777.             reader.readAsDataURL(file);  
  778.         },function(e){  
  779.             mui.toast("读写出现异常: " + e.message );  
  780.         })  
  781.     })  
  782. }  
  784.     //录音按钮
  785.     var bt_recoding = document.getElementById("bt_recoding");
  786.     //中间黑色边框和里面的内容（录音状态）
  787.     var blackBoxSpeak = document.querySelector(".blackBoxSpeak");
  788.     blackBoxSpeak.style.background = "url('../img/ic_record@2x.png')no-repeat 28 16px/65px 104px, url('../img/ic_record_ripple@2x-9.png')no-repeat 111.2px 32px/28.8px 88px";
  789.     blackBoxSpeak.style.backgroundColor = "rgba(0,0,0,.7)";
  790.     //中间黑色边框和里面的内容（暂停状态）
  791.     var blackBoxPause = document.querySelector(".blackBoxPause");
  792.     blackBoxPause.style.background = "rgba(0,0,0,.7) url('../img/ic_release_to_cancel@2x.png')no-repeat center 8px/67.2px 104px";
  793.     blackBoxPause.style.backgroundColor = "rgba(0,0,0,.7)";
  795.     //手指移动相关
  796.     var posStart = 0;//初始化起点坐标
  797.     var posEnd = 0;//初始化终点坐标
  798.     var posMove = 0;//初始化滑动坐标
  800.     //轮播相关
  801.     var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];
  802.     var num = index.length;
  803.     var timer = null; //用于清除计时器
  805.     //直接开启轮播模式
  806.     setTimer();
  807.     function initEvent() {
  808.         bt_recoding.addEventListener("touchstart", function (event) {
  809.             event.preventDefault();//阻止浏览器默认行为
  810.             posStart = 0;
  811.             posStart = event.touches[0].pageY;//获取起点坐标
  812.             //开始录音
  813.             startRecord();
  814.             //显示录音 隐藏暂停
  815.             showBlackBoxSpeak();
  816.         });
  817.         bt_recoding.addEventListener("touchmove", function (event) {
  818.             event.preventDefault();//阻止浏览器默认行为
  819.             posMove = event.targetTouches[0].pageY;//获取滑动实时坐标
  820.             if (posStart - posMove < 200) {
  821.                 //隐藏录音 显示暂停
  822.                // alert('aaa');
  823.                 showBlackBoxSpeak();
  824.             } else {
  825.                  //停止录音
  826.                 stopRecord();
  827.                 //显示录音 隐藏暂停
  828.                 showBlackBoxPause();
  829.                 IsSendAudio=false;
  830.                // alert('停止录音取消发送');
  831.             }
  832.         });
  833.         bt_recoding.addEventListener("touchend", function (event) {
  834.             event.preventDefault(); //阻止浏览器默认行为
  835.             posEnd = 0;
  836.             posEnd = event.changedTouches[0].pageY;//获取终点坐标
  837.             //初始化状态
  838.             initStatus();
  839.             if (posStart - posEnd < 200) {
  840.                stopRecord();
  841.                 showBlackBoxNone();
  842.                 IsSendAudio=true;
  843.             } else {
  844.                 showBlackBoxNone();
  845.                 IsSendAudio=false;
  846.             }
  847.         });
  848.     }
  850.     initEvent();
  852.     //轮播
  853.     function setTimer() {
  854.         timer = setInterval(function () {
  855.             setTimeout(function () {
  856.                 num++;   
  857.                 blackBoxSpeak.style.background = "url('../img/ic_record@2x.png')no-repeat 28px 16px/64px 104px, url('../img/ic_record_ripple@2x-" + index[num] + ".png')no-repeat 111.2px 32px/28.8px 88px";
  858.                 blackBoxSpeak.style.backgroundColor = " rgba(0,0,0,.7)";
  859.             }, 70);
  860.             if (num >= index.length - 1) {
  861.                 num = 0;
  862.             }
  863.         }, 70);
  864.     }
  866.     //初始化状态
  867.     var initStatus = function () {
  868.         bt_recoding.value = '按住 说话';
  870.         //全部隐藏
  871.         showBlackBoxNone();
  872.     }
  874.     //显示录音 隐藏暂停
  875.     var showBlackBoxSpeak = function () {
  876.         bt_recoding.value = '松开 结束';
  877.         blackBoxSpeak.style.display = "block";
  878.         blackBoxPause.style.display = "none";
  879.     }
  881.     //隐藏录音 显示暂停
  882.     var showBlackBoxPause = function () {
  883.         bt_recoding.value = '松开手指，取消发送';
  884.         blackBoxSpeak.style.display = "none";
  885.         blackBoxPause.style.display = "block";
  886.     }
  888.     //隐藏录音
  889.     var showBlackBoxNone = function () {
  890.         blackBoxSpeak.style.display = "none";
  891.         blackBoxPause.style.display = "none";
  892.     }
  894.     //拨打电话
  895.    function chatChoose(){
  896.            var btnArray = [{
  897.                             title: "手机电话"
  898.                         }/*, {
  899.                             title: "语音通话"
  900.                         },{
  901.                             title: "视频通话"
  902.                         }*/];
  903.                         plus.nativeUI.actionSheet({
  904.                             title: "你可以选择以下通话操作",
  905.                             cancel: "取消",
  906.                             buttons: btnArray
  907.                         }, function(e) {
  908.                             var index = e.index;
  909.                             switch (index) {
  910.                                 case 0:
  911.                                     break;
  912.                                 case 1:
  913.                                     //手机电话
  914.                                     plus.device.dial(ToUserId, false);
  915.                                     //mui.toast("手机电话开发中..");
  916.                                     break;
  917.                                 case 2:
  918.                                     //语音通话
  919.                                     mui.toast("语音通话开发中..");
  920.                                     break;
  921.                                 case 3:
  922.                                     //视频通话
  923.                                     mui.toast("视频通话开发中..");
  924.                                     break;
  925.                             }
  926.                         });
  928.    }
  931.      //拨打电话
  932.    function claer_chat(){
  933.            var btnArray = [{
  934.                             title: "清空本地聊天记录"
  935.                         }, {
  936.                             title: "修改聊天背景"
  937.                         }/*,{
  938.                             title: "访问服务端聊天记录"
  939.                         }*/
  940.                           ];
  941.                         plus.nativeUI.actionSheet({
  942.                             title: "聊天设置",
  943.                             cancel: "取消",
  944.                             buttons: btnArray
  945.                         }, function(e) {
  946.                             var index = e.index;
  947.                             switch (index) {
  948.                                 case 0:
  949.                                     break;
  950.                                 case 1:
  951.                                     //清空本地聊天记录
  952.                                     plus.storage.removeItem(ToUserId);
  953.                                     location.reload();
  954.                                     mui.toast("清空成功");
  955.                                     break;
  956.                                 case 2:
  957.                                     var webview = mui.openWindow({
  958.                                         url: 'chatBackground.html',
  959.                                         extras: {
  960.                                         toUserId: ToUserId, //扩展参数
  961.                                         Name: name
  962.                                     }
  963.                                     });
  964.                                 //    mui.open("chatBackground.html");
  965.                                     break;
  966.                                 /*case 3:
  967.                                     //访问服务端聊天记录
  968.                                     mui.toast("访问服务端聊天记录..");
  969.                                     break;*/
  970.                             }
  971.                         });
  973.    }
  976. </script>

发表评论

表情：
评论列表 （有 1 条评论，830人围观）
蒲公英云5D8521
蒲公英云5D8521V铁粉 2022-10-10 03:09
楼主，方便分享下代码？学习下

相关阅读

    相关 WebSocket实现在线聊天

    这一篇文章前面部分我们会先介绍WebSocket协议的基本知识，在最后我们会用Spring Boot来集成WebSocket实现一个简单的在线聊天功能,单纯想看实现部分的话可以

    Dear 丶Dear 丶/ 0 赞/ 537 阅读