h5在线聊天室（附源码）
生活随笔
收集整理的這篇文章主要介紹了
h5在线聊天室（附源码）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
即時(shí)聊天是一個(gè)持續(xù)通信的過(guò)程，需要不斷的訪問(wèn)數(shù)據(jù)庫(kù)。因此很多人用的是websocket。
這樣一來(lái)需要兼顧前端和后端以及消息的處理。比較麻煩。作為一名前端人員，不想把更多的精力花費(fèi)在后端的搭建以及數(shù)據(jù)邏輯處理上，因此使用第三方提供的api就是一個(gè)很不錯(cuò)的選擇。極光im是我無(wú)意中看懂的，花了兩天時(shí)間看了下他們的api文檔，寫(xiě)了一個(gè)簡(jiǎn)單的聊天軟件。用h5封裝的軟件。下面讓大家看一下效果
起初，我是想作為一個(gè)完整的聊天軟件的，因此除了主要的聊天室，還寫(xiě)了登錄頁(yè)面，好友列表頁(yè)面等，并實(shí)現(xiàn)了添加，刪除好友等功能。這里我不多加敘述，以后有機(jī)會(huì)再和大家分享。
極光im調(diào)用api之前需要初始化，但是每次跳轉(zhuǎn)頁(yè)面之后它的鏈接就中斷了。這也是我為甚么沒(méi)有把軟件寫(xiě)完的原因，因?yàn)闆](méi)法。。。哎，言歸正傳。直接上聊天室的代碼吧。
<body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">夢(mèng)緣</h1></header><div class="message" id="message"><div class="send"><div class="time">05/22 06:30</div><div class="msg"><img src="img/login-bg.jpeg" alt="" /><span style="position: absolute;left: 1.1rem;">流痕</span><p>你好！歡迎來(lái)到夢(mèng)緣</p></div></div><div class="show"><div class="time">05/22 06:30</div><div class="msg"><img src="img/touxiang.png" alt="" /><span style="position: absolute;right: 1.1rem;">晚亭</span><p>請(qǐng)文明發(fā)言</p></div></div></div><div class="footer"><img src="img/hua.png" alt="" /><label><input type="file" name="img" id="sendimg" hidden="hidden"/><img src="img/images.png" alt="" /></label><input type="text" id="text" /><p>發(fā)送</p></div></body>css和body主體代碼沒(méi)什么好說(shuō)的，這個(gè)模板也是我在網(wǎng)上找的。你們肯定也可以找到的。
h5{margin: 0;}img{max-width: 100%;vertical-align: middle}input{outline: none; }body{max-width: 720px;margin: 0 auto;background: #f1f1f1;color:#333;font-size: 0.26rem;}.back{position: absolute; top: 0;left: 0.3rem;background:url(img/left.png) no-repeat;width: 0.2rem;height:0.4rem;margin-top: 0.34rem;background-size: 0.2rem 0.4rem;}.message{background-color: #f1f1f1;padding: 1.2rem 0.3rem 1rem 0.3rem; height: 12rem;overflow: auto;}.time{font-size:0.24rem;color:#999;margin-bottom: 0.3rem;text-align: center;}.footer{position: fixed;bottom: 0;height:1rem;background-color:#fff;line-height:1rem;width: 100%;max-width: 720px;border-top: 1px solid #ddd;}.footer img{margin-left:0.2rem;width: 0.5rem;}.footer input{margin-left:0.2rem;width:4rem;height:0.64rem;border-radius: 0.1rem;border:0.01rem solid #ddd;padding : 0 0.15rem;}.footer p{width:1.2rem;height:0.68rem;font-size:0.3rem;color:#fff;line-height:0.68rem;text-align:center;background-color:#ddd;border-radius: 0.1rem;float:right;margin-top:0.17rem;margin-right:0.2rem;}.send:after,.show:after,.msg:after{content: "";clear: both;display: table; }.msg>img{width: 0.8rem;height: .8rem;border-radius: .4rem;float: left;}.msg>p{float: left;margin:0.5rem 0.2rem 0;padding: 0.25rem;background: #fff;font-size: 0.3rem;position: relative;border-radius: 0.2rem;max-width:5rem ;box-sizing: border-box;}.show .msg img,.show .msg p,.show .msg{float: right;position: relative;}.send,.show{padding-bottom: 0.3rem;position: relative;}.alert_novip,.flower_num,.give_flower{display: none;padding: 0.3rem 0.5rem;font-size: 0.28rem;}.alert_novip p,.flower_num p{margin-bottom: 0.45rem;.layui-layer-wrap button{font-size: 0.28rem;padding: 0.2rem 0.3rem;margin-top: 0.1rem;background: #f8f8f8;border-radius: 10px;}}.flower_num button{padding: 0.2rem 0.5rem;border-radius: 10px;}.layui-layer-wrap button:first-child{float: left;}.layui-layer-wrap button:last-child{float: right;background: #FF7171;color: #fff;}.alert_novip button{padding: 0.2rem 0.3rem;border-radius: 10px}.flower{width: 0.8rem;margin: 0 auto;}.give_flower{text-align: center;}.give_flower p{text-align: center;line-height: 1.5;}.give_flower input{width: 1rem;margin-right: 0.1rem;margin-top: 0.2rem;}.give_flower button{display: block;width: 3rem;font-size: 0.28rem;margin: 0 auto;margin-top: 0.6rem;float: none!important;line-height: 0.65rem;border-radius: 10px;}.mui-bar .mui-icon{padding-top: 15px;padding-bottom: 15px;color: #fff;}p{color: #000000;}主要代碼都是js代碼，作為調(diào)用極光api和數(shù)據(jù)的處理等。http://liuqingwushui.top/api/imchat.php?是我放到自己服務(wù)器進(jìn)行極光im簽名鑒權(quán)的，這里發(fā)出來(lái)給你們。如果不想用可以用自己的。具體的可以查看極光api文檔。
//chatroom.js// IM初始化window.JIM = new JMessage({// debug : true});$.ajax({url:'http://liuqingwushui.top/api/imchat.php',data:{},success:function(data){JIM.init({"appkey" : data.appkey,"random_str" : data.random_str,"signature" : data.signature,"timestamp" : data.timestamp,"flag" : 0}).onSuccess(function(data) {console.log('success:' + JSON.stringify(data));ready();}).onFail(function(data) {console.log('error:' + JSON.stringify(data))});},error:function(data){mui.alert("鑒權(quán)失敗");}});// 判斷瀏覽器是否支持 createObjectURL api function getObjectURL(file) { var url = null; if (window.createObjectURL!=undefined) { url = window.createObjectURL(file) ; } else if (window.URL!=undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file) ; } else if (window.webkitURL!=undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file) ; } return url ; }function ready(){(function (doc, win) {var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',recalc = function () {var clientWidth = docEl.clientWidth;if (!clientWidth) return;if(clientWidth>=720){docEl.style.fontSize = '100px';}else{docEl.style.fontSize = 100 * (clientWidth / 720) + 'px';}};if (!doc.addEventListener) return;win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);/*發(fā)送消恿*/function send(headSrc,str,name){var html="<div class='send'><div class='msg'><img src="+headSrc+" /><span style='position: absolute;left: 1.1rem;'>"+name+"</span>"+"<p>"+str+"</p></div></div>";upView(html);}/*接受消息*/function show(headSrc,str,name){var html="<div class='show'><div class='msg'><img src="+headSrc+" /><span style='position: absolute;right: 1.1rem;'>"+name+"</span>"+"<p>"+str+"</p></div></div>";upView(html);}/*更新視圖*/function upView(html){$('.message').append(html);// $('body').animate({scrollTop:$('.message').outerHeight()-window.innerHeight},200);var ele = document.getElementById('message');ele.scrollTop = ele.scrollHeight;}function sj(){return parseInt(Math.random()*10)}$(function(){$("input[type='file']").change(function(){var file=this.files[0];if(!file.length){//獲取用戶(hù)信息var name="";JIM.getUserInfo({'username' : user}).onSuccess(function(data) {name=data.user_info;}).onFail(function(data) {console.log(data);});var fd = new FormData();fd.append("avatar",file);// 發(fā)送消息JIM.sendChatroomPic({'target_rid' : "23638768",'image' : fd,}).onSuccess(function(data,msg) {console.log(msg);JIM.getResource({'media_id' : name.avatar,}).onSuccess(function(src) { var s = getObjectURL(file);show(src.url,"<img src='"+s+"'>",name.nickname);})}).onFail(function(data) {//同發(fā)送單聊文本});}})$('.footer').on('keyup','input',function(){if($(this).val().length>0){$(this).next().css('background','#114F8E');}else{$(this).next().css('background','#ddd');}})$('.footer p').click(function(){//獲取用戶(hù)信息var name="";JIM.getUserInfo({'username' : user}).onSuccess(function(data) {name=data.user_info;}).onFail(function(data) {console.log(data);});var that=this;JIM.sendChatroomMsg({'target_rid' : "23638768",'content' : $(that).prev().val()}).onSuccess(function(data,msg) {var con=$(that).prev().val();if(name.avatar!=""){JIM.getResource({'media_id' : name.avatar,}).onSuccess(function(src) {show(src.url,con,name.nickname);})}else{show("img/touxiang.png",con,name.nickname);}$("#text").val("");}).onFail(function(data) {console.log('error:' + JSON.stringify(data));});})})/*測(cè)試數(shù)據(jù)*/// var arr=['我是小Q','好久沒(méi)聯(lián)系了＿','你在想我乿','怎么不和我說(shuō)諉','跟我聊會(huì)天吧'];// var imgarr=['img/touxiang.png','img/touxiangm.png']// test()// function test(){// $(arr).each(function(i){// setTimeout(function(){// send("img/touxiang.png",arr[i])// },sj()*500)// })// }var user= localStorage.getItem("account");var pass= localStorage.getItem("pass");JIM.login({'username' : user,'password': pass}).onSuccess(function(data) {console.log(data);localStorage.setItem("account", data.username);//業(yè)務(wù)事件監(jiān)聽(tīng)JIM.onEventNotification(function(data) {console.log('event_receive: ' + JSON.stringify(data));});//用戶(hù)信息變更監(jiān)聽(tīng)JIM.onUserInfUpdate(function(data) {console.log('onUserInfUpdate : ' + JSON.stringify(data));});//業(yè)務(wù)事件同步監(jiān)聽(tīng)JIM.onSyncEvent(function(data) {console.log('onSyncEvent : ' + JSON.stringify(data));});//消息已讀數(shù)變更事件實(shí)時(shí)監(jiān)聽(tīng)JIM.onMsgReceiptChange(function(data){console.log('onMsgReceiptChange : ' + JSON.stringify(data));});//消息已讀數(shù)變更事件同步監(jiān)聽(tīng)JIM.onSyncMsgReceipt(function(data){console.log('onSyncMsgReceipt : ' + JSON.stringify(data));});//會(huì)話未讀數(shù)變更監(jiān)聽(tīng)（多端在線）JIM.onMutiUnreadMsgUpdate(function(data){console.log('onConversationUpdate : ' + JSON.stringify(data));});//消息透?jìng)鞅O(jiān)聽(tīng)JIM.onTransMsgRec(function(data){console.log('onTransMsgRec : ' + JSON.stringify(data));});//聊天室消息監(jiān)聽(tīng)JIM.onRoomMsg (function(data){console.log(data);var data=data;JIM.getUserInfo({'username' : data.content.from_id,}).onSuccess(function(d) {//data.user_info.avatar 頭像JIM.getResource({'media_id' : d.user_info.avatar,}).onSuccess(function(src) {if(data.content.msg_type=="text"){send(src.url,data.content.msg_body.text,data.content.from_name);}if(data.content.msg_type=="image"){from_name=data.content.from_name;JIM.getResource({'media_id' : data.content.msg_body.media_id,}).onSuccess(function(img) {//data.code 返回碼//data.message 描述//data.url 資源臨時(shí)訪問(wèn)路徑，具體超時(shí)時(shí)間expire time會(huì)包含在url中send(src.url,"<img src='"+img.url+"' />",d.user_info.nickname);console.log(data);}).onFail(function(data) {});}}).onFail(function(e) {if(data.content.msg_type=="text"){send("img/touxiang.png",data.content.msg_body.text,data.content.from_name);}if(data.content.msg_type=="image"){from_name=data.content.from_name;JIM.getResource({'media_id' : data.content.msg_body.media_id,}).onSuccess(function(img) {//data.code 返回碼//data.message 描述//data.url 資源臨時(shí)訪問(wèn)路徑，具體超時(shí)時(shí)間expire time會(huì)包含在url中send("img/touxiang.png","<img src='"+img.url+"' />",d.user_info.nickname);console.log(data);}).onFail(function(data) { });}})})// if(data.content.msg_type=="text"){// send("litpic",data.content.msg_body.text,data.content.from_name);// }// if(data.content.msg_type=="image"){// from_name=data.content.from_name;// JIM.getResource({// 'media_id' : data.content.msg_body.media_id,// }).onSuccess(function(data) {// //data.code 返回碼// //data.message 描述// //data.url 資源臨時(shí)訪問(wèn)路徑，具體超時(shí)時(shí)間expire time會(huì)包含在url中// send("litpic","<img src='"+data.url+"' />",from_name);// console.log(data);// }).onFail(function(data) {// //data.code 返回碼// //data.message 描述// console.log(data);// });// }});//加入聊天室JIM.enterChatroom({'id':"23638768"}).onSuccess(function(data) {console.log('success:' + JSON.stringify(data));}).onFail(function(data) { });}).onFail(function(data) {mui.openWindow({url:'login.html'})}).onTimeout(function(data) {mui.openWindow({url:'login.html'})});}都是一些很基礎(chǔ)的代碼，技術(shù)含量不是很高。也歡迎大家一次探討。有不懂的可以評(píng)論留言，我看到了會(huì)給你們一一解答。
2022年11月23日補(bǔ)充
極光IM文檔好像更新了，所以代碼要改一下。本著幫人幫到底的原則。特意將代碼完善了一下并開(kāi)源出來(lái)。下載地址：H5聊天源碼(完整版)-Javascript文檔類(lèi)資源-CSDN下載
轉(zhuǎn)載請(qǐng)注明出處，謝謝。
總結(jié)
以上是生活随笔為你收集整理的h5在线聊天室（附源码）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Pytorch—模型微调（fine-tu
- 下一篇： PCI驱动开发学习笔记（一）