html5移动端webscoket实现在线聊天

页面效果图
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,height=device-height"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no"><!--解决点击页面文本框导致页面放大--><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel="stylesheet" type="text/css" href="../font_Icon/iconfont.css"><link rel="stylesheet" type="text/css" href="../font_Icon/iconfont2.css"><link rel="stylesheet" type="text/css" href="../css/chat.css"><script src="../js/HZRecorder.js"></script><script src="../js/common_audio.js"></script><link rel="stylesheet" href="../css/common_audio.css"><script src="../js/mui.min.js"></script><!--标准mui.css--><link rel="stylesheet" href="../css/mui.css"><link rel="stylesheet" href="../css/mui.min.css"><!--App自定义的css--><style type="text/css">.mui-preview-image.mui-fullscreen {position: fixed;z-index: 20;background-color: #000;}.mui-preview-header,.mui-preview-footer {position: absolute;width: 100%;left: 0;z-index: 10;}.mui-preview-header {height: 44px;top: 0;}.mui-preview-footer {height: 50px;bottom: 0px;}.mui-preview-header .mui-preview-indicator {display: block;line-height: 25px;color: #fff;text-align: center;margin: 15px auto 4;width: 70px;background-color: rgba(0, 0, 0, 0.4);border-radius: 12px;font-size: 16px;}.mui-preview-image {display: none;-webkit-animation-duration: 0.5s;animation-duration: 0.5s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}.mui-preview-image.mui-preview-in {-webkit-animation-name: fadeIn;animation-name: fadeIn;}.mui-preview-image.mui-preview-out {background: none;-webkit-animation-name: fadeOut;animation-name: fadeOut;}.mui-preview-image.mui-preview-out .mui-preview-header,.mui-preview-image.mui-preview-out .mui-preview-footer {display: none;}.mui-zoom-scroller {position: absolute;display: -webkit-box;display: -webkit-flex;display: flex;-webkit-box-align: center;-webkit-align-items: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;justify-content: center;left: 0;right: 0;bottom: 0;top: 0;width: 100%;height: 100%;margin: 0;-webkit-backface-visibility: hidden;}.mui-zoom {-webkit-transform-style: preserve-3d;transform-style: preserve-3d;}.mui-slider .mui-slider-group .mui-slider-item img {width: auto;height: auto;max-width: 100%;max-height: 100%;}.mui-android-4-1 .mui-slider .mui-slider-group .mui-slider-item img {width: 100%;}.mui-android-4-1 .mui-slider.mui-preview-image .mui-slider-group .mui-slider-item {display: inline-table;}.mui-android-4-1 .mui-slider.mui-preview-image .mui-zoom-scroller img {display: table-cell;vertical-align: middle;}.mui-preview-loading {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: none;}.mui-preview-loading.mui-active {display: block;}.mui-preview-loading .mui-spinner-white {position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -25px;height: 50px;width: 50px;}.mui-preview-image img.mui-transitioning {-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;transition: transform 0.5s ease, opacity 0.5s ease;}@-webkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}@-webkit-keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}@keyframes fadeOut {0% {opacity: 1;}100% {opacity: 0;}}p img {max-width: 100%;height: auto;}</style><style type="text/css">* {margin: 0;padding: 0;}html, body {background: #fff;}.btn {position: fixed;bottom: 0;width: 100%;height: 60px;background: #eee;}.btn input {width: 100%;height: 100%;font: 20px/60px 'microsoft yahei';}.blackBoxSpeak {width: 176px;height: 176px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;background: rgba(0, 0, 0, .7);display: none;border-radius: 12px;}.blackBoxSpeakConent {font: 14.4px '微软雅黑 Light';position: absolute;left: 0;right: 0;bottom: 12px;display: block;text-align: center;width: 90%;padding: 8px 0;margin: auto;color: #ffffff;font-weight: 200;border-radius: 4px;}.blackBoxPause {width: 176px;height: 176px;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: url("../img/ic_record@2x.png") no-repeat 28px 16px/65px 104px,url("../img/ic_record_ripple@2x-9.png") no-repeat 111.2px 32px/28.8px 88px;background: rgba(0, 0, 0, .7);display: none;border-radius: 12px;} .blackBoxPauseContent {font: 14.4px '微软雅黑 Light';position: absolute;left: 0;right: 0;bottom: 12px;display: block;text-align: center;width: 90%;padding: 8px 0;margin: auto;color: #ffffff;font-weight: 200;border-radius: 4px;}</style> <script type="text/javascript" src="../js/jquery.min.js"></script>    <script type="text/javascript">mui.init();window.addEventListener('refresh', function(e){//执行刷新if(e.detail.id==1){location.reload();}});//聊天记录var chatRecord;//好友手机号var ToUserId ;//名称var toName;//本人手机号var UserId;//本人名字var name ;
var msg_type;var websocket = null;mui.plusReady(function () {name =plus.storage.getItem("name");plus.nativeUI.closeWaiting();mui.currentWebview.show(); var self = plus.webview.currentWebview();ToUserId = ""+self.ToUserId;//获得参数toName = self.Name;console.log(toName);$(".ChatInfoName").html("<font color=\"#000000\">"+toName+"</font>");if(plus.storage.getItem("chatback")!=null){var img=plus.storage.getItem("chatback");$(".chatBox-info").css("background-image","url("+img+")");}console.log("ToUserId----"+ToUserId);plus.storage.setItem("chating",ToUserId);UserId=plus.storage.getItem("username");console.log("UserId----"+UserId);if(plus.storage.getItem(ToUserId)==null){plus.storage.setItem(ToUserId,"");//alert('创建成功');}else{//alert('已经创建成功');chatRecord=plus.storage.getItem(ToUserId);//alert(chatRecord);$(".chatBox-content-demo").append(chatRecord);$(document).ready(function () {$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});}//判断当前浏览器是否支持WebSocketif ('WebSocket' in window) {websocket = new WebSocket("ws://192.168.1.18:8080/xgh_logistics/websocket/"+UserId);/* websocket = new WebSocket("ws://61.163.34.143:8090/zzdy_oa/websocket");*/} else {alert('当前浏览器 Not support websocket')}//连接发生错误的回调方法websocket.onerror = function () {console.log("通信连接发生错误");// setMessageInnerHTML("WebSocket连接发生错误",msg_type);};//连接成功建立的回调方法websocket.onopen = function () {//setMessageInnerHTML("WebSocket连接成功",msg_type);console.log("WebSocket连接成功-------");/* var Content='{"UserId":"'+UserId+'","ToUserId":"'+ToUserId+'","Content":"WebSocket连接成功","time":"'+time+'"}';//字符串中的属性要严格的加上引号websocket.send(Content);*/}//接收到消息的回调方法websocket.onmessage = function (event) {var str=event.data;var obj = JSON.parse(str);;console.log("发送方--"+obj.UserId);console.log("接收方---"+obj.ToUserId);console.log("消息内容"+obj.Content);console.log("消息类型"+obj.type);console.log("消息类型"+obj.time);msg_type=obj.type;var audio_Time="test";if(msg_type=="audio"){audio_Time=obj.audio_time;}if(ToUserId==obj.UserId){setMessageInnerHTML(obj.Content,obj.time,msg_type,audio_Time);}}//连接关闭的回调方法websocket.onclose = function () {console.log("WebSocket连接关闭");//setMessageInnerHTML("WebSocket连接关闭");}//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。window.onbeforeunload = function () {closeWebSocket();}//将消息显示在网页上function setMessageInnerHTML(innerHTML,msg_Time,msg_type,audio_Time) {var content=null;if(msg_type=="image"){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>" // document.getElementById('message').innerHTML += innerHTML + '<br/>';}if(msg_type=="txt"||msg_type==null){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>"; console.log("----"+content);}if(msg_type=="audio"){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>";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>" ;console.log("http---"+content);}addChatRecord(content);//新消息提示startPlay();$(".chatBox-content-demo").append(content);$(document).ready(function () {$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});}//关闭WebSocket连接function closeWebSocket() {websocket.close();}})/* if(window.plus){  // 在这里调用5+ API  }else{// 兼容老版本的plusready事件  document.addEventListener('plusready',function () {  }},false); }*//*** @param {Object} chat_record    聊天文本*/function addChatRecord(chat_record){//console.log(chat_record);chatRecord=plus.storage.getItem(ToUserId);console.log("-++++-------"+ToUserId);chatRecord+=chat_record;console.log("-------"+chatRecord);plus.storage.setItem(ToUserId,chatRecord);}/**  * 播放音频  * @param {Object} path  */  var player;
function playAudio (id,path) {  if(player!=null) //如果存在  {  player.stop(); //停止正在播放的音频，  $(".r_yuyin").find("s").removeClass("bofang");player=null;}  else{$(id).find("s").addClass("bofang");player = plus.audio.createPlayer(path);player.play(function(){  $(id).find("s").removeClass("bofang");//  mui.toast("播放完成");  }, function(e) {  // mui.toast("播放失败");  });  }}  var dshiqi = null;var audiotime;var audioStatus;function playaudio(id) {var url = $(id).find("input").val();audioStatus = plus.audio.createPlayer(url);//  var len=  audioStatus.getBuffered();//$(id).find("s").removeClass("bofang");playAudio(id,url);}
/**  * base64字符串转成语音文件(参考http://ask.dcloud.net.cn/question/16935)  * @param {Object} base64Str  * @param {Object} callback  */
function dataURL2Audio (base64Str, callback) {  var base64Str = base64Str.replace('data:audio/amr;base64,','');  var audioName = (new Date()).valueOf() + '.amr';  plus.io.requestFileSystem(plus.io.PRIVATE_DOC,function(fs){  fs.root.getFile(audioName,{create:true},function(entry){  // 获得平台绝对路径  var fullPath = entry.fullPath;  if(mui.os.android){    // 读取音频  var Base64 = plus.android.importClass("android.util.Base64");  var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");  try{  var out = new FileOutputStream(fullPath);  var bytes = Base64.decode(base64Str, Base64.DEFAULT);  out.write(bytes);   out.close();  // 回调  callback && callback(entry);  }catch(e){  console.log(e.message);  }  }else if(mui.os.ios){  var NSData = plus.ios.importClass('NSData');  var nsData = new NSData();  nsData = nsData.initWithBase64EncodedStringoptions(base64Str,0);  if (nsData) {  nsData.plusCallMethod({writeToFile: fullPath,atomically:true});  plus.ios.deleteObject(nsData);  }  // 回调  callback && callback(entry);  }  })  })
}  //发送消息/*  function send() {var message = document.getElementById('text').value;websocket.send(message);}*/</script></head>
<body>
<div id="content" class="content">
<div class="chatContainer"><div class="chatBtn"><i class="iconfont icon-xiaoxi1"></i></div><div class="chatBox" ref="chatBox"><div class="chatBox-head"><div class="chatBox-head-two"><div class="chat-return" style="color: #000000;"><div class="mui-icon mui-icon-back"></div></div><div class="chat-people"><div class="ChatInfoName" style="width: 100%;font;position: absolute;left: 39%;"></div></div><div class="ChatIcon"><div onclick="chatChoose()"  class="mui-icon mui-icon-phone" style="color: #000000;"></div>&nbsp;&nbsp;<div onclick="claer_chat()"  class="mui-icon mui-icon-bars" style="color: #000000;"></div></div><!-- <div class="chat-close">关闭</div>--></div></div><div class="chatBox-info"><!--  <audio controls autoplay src="http://sc1.111ttt.cn:8282/2018/1/03m/13/396131232171.m4a?tflag=1546606800&pin=97bb2268ae26c20fe093fd5b0f04be80#.mp3"></audio>--><div class="chatBox-kuang" ref="chatBoxkuang"><div class="chatBox-content"><div style="display: none;"><audio controls autoplay></audio> </div>     <div class="chatBox-content-demo" id="chatBox-content-demo"></div></div><div class="chatBox-send"><div class="div-textarea" contenteditable="true"></div><div><button id="bt_recoding" class="btn-default-styles"><i class="mui-icon mui-icon-mic"></i></button><label id="chat-tuxiang" title="发送图片" for="inputImage" class="btn-default-styles"><input type="file" onchange="selectImg(this)" accept="image/*" name="file" id="inputImage" class="hidden"  capture="camera"><i class="mui-icon mui-icon-image"></i></label><button id="chat-fasong" class="btn-default-styles"><i class="fasong">发送</i><!--<i class="iconfont icon-fasong" style="width: px;"></i>--></button></div></div></div></div></div>
</div>
</div>
<!-- 中间黑框 录音状态 -->
<div class="blackBoxSpeak"><p class="blackBoxSpeakConent">手指上划，取消发送</p>
</div><!-- 中间黑框 暂停状态 -->
<div class="blackBoxPause"><p class="blackBoxPauseContent" style="background: red">松开手指， 取消发送</p>
</div>
<script>function Time(){var date=new Date();var year=date.getFullYear();//当前年份var month=date.getMonth();//当前月份var data=date.getDate();//天var hours=date.getHours();//小时var minute=date.getMinutes();//分var second=date.getSeconds();//秒var time=year+"-"+fnW((month+1))+"-"+fnW(data)+" "+fnW(hours)+":"+fnW(minute)+":"+fnW(second);console.log("time---"+time);return time;}//补位 当某个字段不是两位数时补0function fnW(str){var num;str>9?num=str:num="0"+str;return num;} screenFuc();function screenFuc() {var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度//屏幕小于768px时候,布局changevar winWidth = $(window).innerWidth();if (winWidth <= 768) {var totalHeight = $(window).height(); //页面整体高度$(".chatBox-info").css("height", totalHeight - topHeight);var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度//中间内容高度$(".chatBox-content").css("height", infoHeight - 46);$(".chatBox-content-demo").css("height", infoHeight - 66);$(".chatBox-list").css("height", totalHeight - topHeight);$(".chatBox-kuang").css("height", totalHeight - topHeight);$(".div-textarea").css("width", winWidth - 150);} else {$(".chatBox-info").css("height", 495);$(".chatBox-content").css("height", 448);$(".chatBox-content-demo").css("height", 448);$(".chatBox-list").css("height", 495);$(".chatBox-kuang").css("height", 495);$(".div-textarea").css("width", 260);}}(window.onresize = function () {screenFuc();})();//返回列表$(".chat-return").click(function () {plus.storage.removeItem("chating");mui.back();/* window.history.back();*/});//点击选择照片自动触发input图片上传$("#chat-tuxiang").click(function () {//$("#inputImage").click();document.getElementById("inputImage").click();});//      发送信息$("#chat-fasong").click(function () {var textContent = $(".div-textarea").html()/* resplace(/[\n\r]/g, '<br>') */;if (textContent != "") {var chatdiv="<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\">"+Time()+"</small> </div> " +"<div class=\"right\"> <div class=\"chat-message\"> " + textContent + " </div> " +"<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>";console.log("============="+chatdiv);$(".chatBox-content-demo").append(chatdiv);//发送后清空输入框$(".div-textarea").html("");//聊天框默认最底部$(document).ready(function () {$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});// out.println(textContent); addChatRecord(chatdiv);var Content='{"UserId":"'+UserId+'","FromUserName":"'+name+'","ToUserId":"'+ToUserId+'","Content":"'+textContent+'","type":"txt","time":"'+Time()+'"}';//字符串中的属性要严格的加上引号websocket.send(Content);}});//通过画布降低上传图片像素var  canvas = document.createElement("canvas");var  ctx = canvas.getContext('2d');//      发送图片function selectImg(pic) {if (!pic.files || !pic.files[0]) {return;}var reader = new FileReader();var images=new Image();reader.onload = function () {var url = reader.result;//读取到的文件内容.这个属性只在读取操作完成之后才有效,并且数据的格式取决于读取操作是由哪个方法发起的.所以必须使用reader.onload，images.src=url;//reader读取的文件内容是base64,利用这个url就能实现上传前预览图片var chatImg="<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\">"+Time()+"</small> </div> " +"<div class=\"right\"> <div class=\"chat-message\"><img src=" + images.src + " data-preview-src='' data-preview-group='1'></div> " +"<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>";addChatRecord(chatImg);$(".chatBox-content-demo").append(chatImg);//聊天框默认最底部$(document).ready(function () {$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});};images.onload=function(){var w = images.naturalWidth,h = images.naturalHeight;canvas.width = w;canvas.height = h;ctx.drawImage(images, 0, 0, w, h, 0, 0, w, h);fileUpload();};reader.readAsDataURL(pic.files[0]);}function fileUpload() {var data = canvas.toDataURL("image/jpeg",0.3);console.log("img------"+data);var Content='{"UserId":"'+UserId+'","FromUserName":"'+name+'","ToUserId":"'+ToUserId+'","Content":"'+data+'","type":"image","time":"'+Time()+'"}';//字符串中的属性要严格的加上引号websocket.send(Content);}</script>
</body><script src="../js/mui.zoom.js"></script><script src="../js/mui.previewimage.js"></script><script>mui.previewImage();</script>
</html><script type="text/javascript">var MIN_SOUND_TIME = 800;var startTimestamp = null;var stopTimestamp = null;// 开始录音var r;//语音pathvar amr;//判断是否发送语音var IsSendAudio=true;function startRecord(){//  alert("开始录音");startTimestamp = (new Date()).getTime();r = plus.audio.getRecorder();r.record( {filename:"_doc/audio/"}, function (p) {//alert("录音成功");amr=p;stopTimestamp = (new Date()).getTime();if(IsSendAudio==true){if (stopTimestamp - startTimestamp < MIN_SOUND_TIME) {mui.toast("按键时间太短");}else{Audio2dataURL(amr);}}}, function ( e ) {alert( "Audio record failed: " + e.message );} );}// 停止录音function stopRecord(){r.stop();}function startPlay(){var p= plus.audio.createPlayer("../music/tips.mp3");//alert("p"+p);p.play(function(){//alert("播放完毕");})} /**  * 录音语音文件转base64字符串  * @param {Object} path  */
function Audio2dataURL (path) {  plus.io.resolveLocalFileSystemURL(path, function(entry){  entry.file(function(file){  var reader = new plus.io.FileReader();  reader.onloadend = function (e) {  var data=e.target.result;stopTimestamp = (new Date()).getTime();var times=((stopTimestamp-startTimestamp)/1000).toFixed(1);console.log("------"+e.target.result);  var chataudio="<div class=\"clearfloat\">" +"<div class=\"author-name\"><small class=\"chat-date\">"+Time()+"</small> </div> " +"<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>" +"<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>";addChatRecord(chataudio);$(".chatBox-content-demo").append(chataudio);//聊天框默认最底部$(document).ready(function () {$("#chatBox-content-demo").scrollTop($("#chatBox-content-demo")[0].scrollHeight);});var Content='{"UserId":"'+UserId+'","FromUserName":"'+name+'","ToUserId":"'+ToUserId+'","Content":"'+data+'","type":"audio","time":"'+Time()+'","audio_time":"'+times+'"}';//字符串中的属性要严格的加上引号websocket.send(Content);};  reader.readAsDataURL(file);  },function(e){  mui.toast("读写出现异常: " + e.message );  })  })
}  //录音按钮var bt_recoding = document.getElementById("bt_recoding");//中间黑色边框和里面的内容（录音状态）var blackBoxSpeak = document.querySelector(".blackBoxSpeak");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";blackBoxSpeak.style.backgroundColor = "rgba(0,0,0,.7)";//中间黑色边框和里面的内容（暂停状态）var blackBoxPause = document.querySelector(".blackBoxPause");blackBoxPause.style.background = "rgba(0,0,0,.7) url('../img/ic_release_to_cancel@2x.png')no-repeat center 8px/67.2px 104px";blackBoxPause.style.backgroundColor = "rgba(0,0,0,.7)";//手指移动相关var posStart = 0;//初始化起点坐标var posEnd = 0;//初始化终点坐标var posMove = 0;//初始化滑动坐标//轮播相关var index = [9, 8, 7, 6, 5, 4, 3, 2, 1, 2, 3, 4, 5, 6, 7, 8, 9];var num = index.length;var timer = null; //用于清除计时器//直接开启轮播模式setTimer();function initEvent() {bt_recoding.addEventListener("touchstart", function (event) {event.preventDefault();//阻止浏览器默认行为posStart = 0;posStart = event.touches[0].pageY;//获取起点坐标//开始录音startRecord();//显示录音 隐藏暂停showBlackBoxSpeak();});bt_recoding.addEventListener("touchmove", function (event) {event.preventDefault();//阻止浏览器默认行为posMove = event.targetTouches[0].pageY;//获取滑动实时坐标if (posStart - posMove < 200) {//隐藏录音 显示暂停// alert('aaa');showBlackBoxSpeak();} else {//停止录音stopRecord();//显示录音 隐藏暂停showBlackBoxPause();IsSendAudio=false;// alert('停止录音取消发送');}});bt_recoding.addEventListener("touchend", function (event) {event.preventDefault(); //阻止浏览器默认行为posEnd = 0;posEnd = event.changedTouches[0].pageY;//获取终点坐标//初始化状态initStatus();if (posStart - posEnd < 200) {stopRecord();showBlackBoxNone();IsSendAudio=true;} else {showBlackBoxNone();IsSendAudio=false;}});}initEvent();//轮播function setTimer() {timer = setInterval(function () {setTimeout(function () {num++;   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";blackBoxSpeak.style.backgroundColor = " rgba(0,0,0,.7)";}, 70);if (num >= index.length - 1) {num = 0;}}, 70);}//初始化状态var initStatus = function () {bt_recoding.value = '按住 说话';//全部隐藏showBlackBoxNone();}//显示录音 隐藏暂停var showBlackBoxSpeak = function () {bt_recoding.value = '松开 结束';blackBoxSpeak.style.display = "block";blackBoxPause.style.display = "none";}//隐藏录音 显示暂停var showBlackBoxPause = function () {bt_recoding.value = '松开手指，取消发送';blackBoxSpeak.style.display = "none";blackBoxPause.style.display = "block";}//隐藏录音var showBlackBoxNone = function () {blackBoxSpeak.style.display = "none";blackBoxPause.style.display = "none";}//拨打电话function chatChoose(){var btnArray = [{title: "手机电话"}/*, {title: "语音通话"},{title: "视频通话"}*/];plus.nativeUI.actionSheet({title: "你可以选择以下通话操作",cancel: "取消",buttons: btnArray}, function(e) {var index = e.index;switch (index) {case 0:break;case 1://手机电话plus.device.dial(ToUserId, false);//mui.toast("手机电话开发中..");break;case 2://语音通话mui.toast("语音通话开发中..");break;case 3://视频通话mui.toast("视频通话开发中..");break;}});}//拨打电话function claer_chat(){var btnArray = [{title: "清空本地聊天记录"}, {title: "修改聊天背景"}/*,{title: "访问服务端聊天记录"}*/];plus.nativeUI.actionSheet({title: "聊天设置",cancel: "取消",buttons: btnArray}, function(e) {var index = e.index;switch (index) {case 0:break;case 1://清空本地聊天记录plus.storage.removeItem(ToUserId);location.reload();mui.toast("清空成功");break;case 2:var webview = mui.openWindow({url: 'chatBackground.html',extras: {toUserId: ToUserId, //扩展参数Name: name}});//    mui.open("chatBackground.html");break;/*case 3://访问服务端聊天记录mui.toast("访问服务端聊天记录..");break;*/}});}</script>
html5移动端webscoket实现在线聊天相关推荐

springboot md5加密_实在！基于Springboot和WebScoket，写了一个在线聊天小程序
基于Springboot和WebScoket写的一个在线聊天小程序 (好几天没有写东西了,也没有去练手了,就看了看这个...) 项目说明此项目为一个聊天的小demo,采用springboot+web ...
PHP匿名在线聊天室系统源码自适应PC+WAP端
介绍: PHP匿名在线聊天室系统源码自适应PC+WAP端可发语音.图片修改数据库config\settings.php可拿去搭建专门跟客户聊天的网站网盘下载地址: http://kekewl. ...
Java创建服务端和客户端基础（一）多人在线聊天程序实战基础
基于Java一步步实现多人在线聊天!(持续更新中) 文章目录 ⚡前言
【uni-app】小程序实现微信在线聊天（私聊/群聊）
之前学习使用uni-app简单实现一个在线聊天的功能,今天记录一下项目核心功能的实现过程.页面UI以及功能逻辑全部来源于微信,即时聊天业务的实现使用socket.io,前端使用uni-app开发,后端 ...
php+websocket实现在线聊天室(一)
聊天室最终实现版:https://www.sinight.site/chatroom 可以自己多开几个窗口体验前言:WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的 ...
基于Server-Sent Event的简单在线聊天室
一.Web即时通信所谓Web即时通信,就是说我们可以通过一种机制在网页上立即通知用户一件事情的发生,是不需要用户刷新网页的.Web即时通信的用途有很多,比如实时聊天,即时推送等.如当我们在登陆浏览 ...
微信小程序 WebSocket 通信 —— 在线聊天
在Node栏目就讲到了Socket通信的内容,使用Node实现Socke通信,还使用两个流行的WebSocket 库,ws 和 socket.io,在小程序中的WebSocket接口和HTML5的We ...
【JavaWeb】关于WebSocket的IM在线聊天技术（一）
最近在弄IM的在线聊天,发现layim又停摆了,所以下决心看看以前学的socket技术,这次的想法是不用swing,使用javaweb的jsp实现在线聊天. 我计划的大致实现步骤分这样几大步: 1.首 ...
简易Java web在线聊天-websocket
公司做了伪在线客服系统.自己为了技术,提前研究了使用websocket进行长连接通信.写了个简单的在线聊天demo,算是对自己的交代,后期会抽时间优化,完善流程等. 语言:Java 客户端:html5 ...
SpringBoot集成WebSocket实现在线聊天
文章目录前言 1.WebSocket引入 2.环境搭配 2.1.工程创建 2.2.依赖导入 2.3.配置类 3.具体实现 3.1.前置知识 3.2.数据封装 3.3.思路分析 3.4.服务构建 3. ...
html5移动端webscoket实现在线聊天

html5移动端webscoket实现在线聊天相关推荐

最新文章

热门文章
