html5聊天實例｜h5+jquery仿微信界面聊天｜朋友圈模板

目介紹

采用html5+css3+Zepto+swiper+wcPop+flex等技術開發的聊天實例。實現發送消息/表情，圖片/視頻預覽，添加好友/群聊，語音模塊，地圖定位模塊，整體功能界面效果類似微信聊天。

使用技術

整體布局：HTML5 + css3(flex) + fontSize.js

zepto版本：Zepto v1.0

輪播組件：Swiper 3.4.1

字體圖標：阿里iconfont字體圖標庫

下拉刷新：mescroll v1.4.0

效果演示

了解Flex布局

Flex | Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。

https://www.runoob.com/w3cnote/flex-grammar.html

2009年，W3C提出了一種新的方案—-Flex布局，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持，這意味著，現在就能很安全地使用這項功能。Flex 布局將成為未來布局的首選方案。

采用Flex布局的元素，稱為Flex容器（flex container），簡稱”容器”。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱”項目”。

如上圖：容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）

想要了解Flex布局更多的用法，可以去網上查閱相關資料，這里不作詳細概述了。

下拉刷新插件mescroll

mescroll | 精致的下拉刷新和上拉加載 js框架.支持vue,完美運行于移動端和主流PC瀏覽器。

http://www.mescroll.com/

https://github.com/mescroll/mescroll

注意：如果你是uni-app開發者，下面是mescroll的uniapp版本

http://www.mescroll.com/uni.html

運行效果圖

彈窗組件wcPop

wcpop是一個手機端彈窗插件，提供了多種類型的彈窗功能，有ios、android彈窗效果

// 基本使用
wcPop({ 
  //傳入參數
})

如上圖彈窗菜單，使用下面代碼即可實現

$("#J_chatList").on("contextmenu", ".item", function (e) {
	e.preventDefault();
	
	//獲取長按坐標點
	var _points = [e.pageX, e.pageY];
	
	wcPop({
		skin: 'contextmenu',
		follow: _points,
		opacity: 0,
		btns: [
			{
				text: '發送給朋友',
				style: 'color:#212121;',
				onTap() {...}
			}, 
			{text: '復制'}, 
			{text: '收藏'},
			{text: '撤回'},
			{text: '刪除'},
		]
	});
});

聊天功能模塊

滾動聊天消息至最底部

function wchat_ToBottom() {
	$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
}

獲取光標位置 | 在光標處插入表情

// 定義最后光標位置
var _lastRange = null, _sel = window.getSelection && window.getSelection();
var _rng = {
	getRange: function () {
		if (_sel && _sel.rangeCount > 0) {
			return _sel.getRangeAt(0);
		}
	},
	addRange: function () {
		if (_lastRange) {
			_sel.removeAllRanges();
			_sel.addRange(_lastRange);
		}
	}
}

// 聊天插入表情
$("#J__swiperEmotion").on("click", ".face_item", function () {
	var that = $(this), range;
	
	var img = that[0].cloneNode(true);
	if (!_editor.childNodes.length) {
		_editor.focus();
	}
	_editor.blur(); //輸入表情時禁止輸入法

	setTimeout(function () {
		if (document.selection && document.selection.createRange) {
			document.selection.createRange().pasteHTML(img);
		} else if (window.getSelection && window.getSelection().getRangeAt) {
			range = _rng.getRange();
			range.insertNode(img);
			range.collapse(false);
			
			//記錄當前光標位置 (否則光標會跑到表情前面)
			_lastRange = range;
			_rng.addRange();
		}
	}, 10);
});

判斷編輯框信息是否為空

function isEmpty() {
	var html = $editor.html();
	html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");
	html = html.replace(/<[^img].*?>/ig, "");
	html = html.replace(/ /ig, "");
	return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}

?? 最后

如果你覺得這篇文章對你有幫助，麻煩點個「關注/轉發」，讓更多的人也能看到你的分享！

從Recorder H5 GitHub開源庫優化后，對邊錄邊轉碼成小語音片段文件實時上傳服務器這種操作支持非常良好，因此以前不太好支持的H5語音通話已經有了更好的突破空間。因此花了兩晚時間打造了一個H5語音通話聊天的demo。
歡迎在線把玩：https://xiangyuecn.github.io/Recorder/

一、把玩方法

準備局域網內兩臺設備(Peer A、Peer B)用最新版本瀏覽器(demo未適配低版本)分別打開demo頁面（也可以是同一瀏覽器打開兩個標簽）
勾選頁面中的H5版語音通話聊天，在Peer A中點擊新建連接
把Peer A的本機信手動復制傳輸給Peer B，粘貼到遠程信息中，并點擊確定連接
把Peer B自動生成的本機信息手動復制傳輸給Peer A，粘貼到遠程信息中，并點擊確定連接
雙方P2P連接已建立，使用頁面上方的錄音功能，隨時開啟錄音，音頻數據會實時發送給對方

局域網H5版對講機

二、技術特性

（1）數據傳輸

github demo中考慮到減少對服務器的依賴，因此采用了WebRTC P2P傳輸功能，無需任何服務器支持即可實現局域網內的兩個設備之間互相連接，連接代碼也算簡單。有服務器支持可能就要逆天了，不過代碼也會更復雜。

如果正式使用，可能不太會考慮使用WebRTC，用WebSocket通過服務器進行轉發可能是最佳的選擇。

WebRTC局域網P2P連接要點（實際代碼其實差不多，只不過多做了點兼容）：

/******Peer A(本機)******/
var peerA=new RTCPeerConnection(null,null)
//開啟會話，等待遠程連接
peerA.createOffer().then(function(offer){
 peerA.setLocalDescription(offer);
 peerAOffer=offer;
});
var peerAICEList=[......] //通過peerA.onicecandidate監聽獲得所有的ICE連接信息候選項，如果有多個網絡適配器，就會有多個候選
//創建連接通道對象，A端通過這個來進行數據發送
var peerAChannel=peerA.createDataChannel("RTC Test");
/******Peer B(遠程)******/
var peerB=new RTCPeerConnection(null,null)
//連接到Peer A
peerB.setRemoteDescription(peerAOffer);
//開啟應答會話，等待Peer A確認連接
peerB.createAnswer().then(function(answer){
 peerB.setLocalDescription(answer);
 peerBAnswer=answer;
});
//把Peer A的連接點都添加進去
peerB.addIceCandidate(......peerAICEList)
var peerBICEList=[......] //通過peerB.onicecandidate監聽獲得所有的ICE連接信息候選項，如果有多個網絡適配器，就會有多個候選
var peerBChannel=... //通過peerB.ondatachannel得到連接通道對象，B端通過這個來進行數據發送
/*******最終完成連接********/
//連接到Peer B
peerA.setRemoteDescription(peerBAnswer);
//把Peer B的連接點都添加進去
peerA.addIceCandidate(......peerBICEList)
/*
peerA peerB分別等待peerA/BChannel.onopen回調即完成P2P連接
，然后通過監聽peerA/BChannel.onmessage獲得對方發送的信息
，通過peerA/BChannel.send(data) 發送數據。
*/

（2）音頻采集和編碼

由于是在我的Recorder庫中新加的demo，因此音頻采集和編碼都是現成的，Recorder庫有好的兼容性和穩定性，因此節省了最大頭的工作量。

編碼最佳使用MP3格式，因為此格式已優化了實時編碼性能，可做到邊錄邊轉碼，16kbps 16khz的情況下可做到2kb每秒的文件大小，音質還可以，實時傳輸時為3kb每秒，15分鐘大概3M的流量。

用wav格式也可以，不過此格式編碼出來的數據量太大，16位 16khz接近50kb每秒的實時傳輸數據，15分鐘要37M多流量。其他格式由于暫未對實時編碼進行優化，使用中會導致明顯卡頓。

降噪、靜音檢測等高級功能是沒有的，畢竟是非專業人員要求高點可以，但不要超出范圍太多啦。

（3）音頻實時接收和播放

接收到一個音頻片段后，本應該是立即播放的，但由于編碼、網絡傳輸導致的延遲，可能上個片段還未播放完（甚至未開始播放），因此需要緩沖處理。

因為存在緩沖，就需要進行實時同步處理，如果緩沖內積壓了過多的音頻片段，會導致語音播放滯后太多，因此需要適當進行對數據進行丟棄，實測發現網絡正常、設備性能靠譜的情況下基本沒有丟棄的數據。

然后就是播放了，本應是播完一個就播下一個，測試發現這是不靠譜的。因為結束一個片段后再開始播放下一個發出聲音，這個過程會中斷比較長時間，明顯感覺得出來中間存在短暫停頓。因此必須在片段未播完時準備好下一個片段的播放，并且提前開始播放，達到抹掉中間的停頓。

我寫了兩個播放方式：

實時解碼播放
雙Audio輪換播放

最開始用一個Audio停頓感太明顯，因此用兩個Audio輪換抹掉中間的停頓，但發現不同格式Auido播放差異巨大，播放wav非常流暢，但播放mp3還是存在停頓（后面用解碼的發現是得到的PCM時長變長了，導致事件觸發會出現誤差，為什么會變長？怪異）。

因此后面寫了一個解碼然后再播放，mp3這次終于能正常連續播放了，wav格式和雙Audio的播放差異不大。實時解碼里面也用到了雙Audio中的技巧，其實也是用到了兩個BufferSource進行類似的輪換操作，以抹掉兩個片段間的停頓。

不過最終播放效果還是不夠好，音質變差了點，并且多了點噪音。如果有現成的播放代碼拿過來用就就好了。

三、應用場景

數據傳輸改成WebSocket，做個仿微信語音通話H5版還是可以的（受限于Recorder瀏覽器支持）
局域網H5版對講機（前端玩具）
......沒有想到

完。

TML5 是當前 Web 開發中廣泛使用的標準，具有許多強大的特性和功能，未來仍然具有巨大的發展潛力。以下是 HTML5 的一些未來展望：

增強用戶體驗：HTML5 提供了許多新的 API 和功能，如 Canvas、WebGL、Web Audio 等，可以實現更豐富、更交互式的用戶體驗，未來可以進一步提升 Web 應用程序的用戶體驗。
移動端應用開發：隨著移動互聯網的普及，HTML5 可以作為開發跨平臺移動應用的技術之一。未來，HTML5 在移動端應用開發領域可能會有更多創新和突破，實現更好的性能和用戶體驗。
增強多媒體支持：HTML5 對音頻和視頻的支持更加完善，未來可以進一步提升多媒體內容在 Web 上的表現和傳播效果，為在線媒體、游戲等領域帶來更多可能性。
進一步標準化和優化：HTML5 標準仍在不斷完善和發展，未來可能會有更多的標準化工作，以解決現有標準的不足和問題，提升 Web 應用的質量和性能。
增強安全性：HTML5 引入了一些安全機制，如跨域資源共享（CORS）、內容安全策略（CSP）等，未來可能會進一步加強 Web 應用的安全性，保護用戶數據和隱私。
Web 組件化和模塊化：未來 HTML5 可能會更多地支持 Web 組件化和模塊化開發，提供更靈活、可復用的組件和模塊，加快 Web 應用開發的速度和效率。
增強對設備的支持：隨著物聯網和智能設備的快速發展，未來 HTML5 可能會加強對各種設備的支持，包括智能家居設備、可穿戴設備等，使其更好地融入 Web 生態系統。
進一步推動 Web 標準化：HTML5 的發展也將繼續推動 Web 標準化的進程，促進不同瀏覽器和平臺間的兼容性和統一性，為開發者和用戶提供更一致的 Web 體驗。
增強對可訪問性的支持：未來，HTML5 可能會更多地關注對殘障人士的支持，包括視力障礙和聽力障礙等，使 Web 內容更易于訪問和理解。
融合人工智能和機器學習：隨著人工智能和機器學習技術的發展，HTML5 可能會更多地與這些技術結合，為開發者提供更豐富的工具和功能，從而創造出更具智能化的 Web 應用。
增強對區塊鏈和加密貨幣的支持：隨著區塊鏈技術的發展，未來 HTML5 可能會更多地支持與區塊鏈和加密貨幣相關的功能和API，為開發者提供構建去中心化應用的能力。
增強對實時通信和協作的支持：HTML5 可能會在 WebRTC 和實時通信領域有更進一步的發展，為實時視頻會議、協作工具等場景提供更好的支持。
推動跨平臺開發：HTML5 在跨平臺開發方面有很大潛力，未來可能會進一步推動跨平臺開發工具和框架的發展，使開發者能夠更方便地開發同時支持多個平臺的應用。
環境保護和可持續發展：HTML5 的發展也可能與環境保護和可持續發展相關，例如通過優化 Web 應用程序的能效，減少能源消耗，促進數字化轉型與綠色發展相結合。
拓展虛擬現實和增強現實：HTML5 可能會在虛擬現實（VR）和增強現實（AR）應用方面有更多的發展，為開發者提供更好的工具和支持，使這些技術更廣泛地應用于 Web 開發中。
增強對人類與機器的交互支持：未來 HTML5 可能會更多地關注人類與機器之間的交互，包括語音識別、自然語言處理等技術的集成，為開發智能對話型界面和智能助手提供更好的支持。
推動可持續發展目標：HTML5 的應用也可能會與可持續發展目標相關聯，例如促進可持續城市發展、提高教育水平、改善醫療保健等方面，為實現聯合國可持續發展目標做出貢獻。
加強網絡安全和隱私保護：HTML5 可能會在網絡安全和隱私保護方面有更多創新，加強網站和應用程序的安全性，保護用戶的個人信息和數據不受侵犯。
支持新興技術的融合：未來 HTML5 可能會更多地融合新興技術，如邊緣計算、人工智能、大數據分析等，為開發者提供更豐富的工具和功能，推動 Web 技術與其他領域的融合創新。
促進數字化轉型和創新：HTML5 的發展將繼續促進數字化轉型和創新，在各個行業和領域推動數字化技術的應用和創新，為社會經濟發展帶來更多機遇和可能性。
增強對移動互聯網的支持：HTML5 未來可能會進一步加強對移動設備和移動應用的支持，優化移動端用戶體驗，推動移動互聯網的發展。
推動社交化網絡和內容共享：HTML5 可能會更多地融入社交網絡和內容共享領域，為開發者提供更多工具和功能，促進社交化網絡應用和內容共享平臺的創新。
可穿戴設備和物聯網的整合：未來 HTML5 可能會更好地整合可穿戴設備和物聯網技術，為開發智能穿戴應用和物聯網解決方案提供更好的支持。
跨境電子商務和金融科技：HTML5 的發展也可能會在跨境電子商務和金融科技領域有更大作用，為跨境電商平臺和金融科技應用提供更豐富的功能和工具。
持續改善用戶體驗：未來 HTML5 可能會持續改善用戶體驗，包括更快的加載速度、更流暢的動畫效果、更直觀的交互方式等，使用戶能夠享受更優質的 Web 使用體驗。
推動邊緣計算和云服務的融合：HTML5 可能會進一步促進邊緣計算和云服務的融合，為開發者提供更多跨平臺、跨設備的開發工具和服務，支持邊緣智能和云端協作。
支持可訪問性和無障礙性：未來 HTML5 可能會更加關注可訪問性和無障礙性，為殘障人士提供更友好的網絡環境，確保所有用戶都能夠方便地訪問和使用 Web 內容。
推動教育和在線學習：HTML5 的發展也可能會在教育和在線學習領域發揮更大作用，為開發教育應用和在線學習平臺提供更強大的功能和工具，推動教育信息化的發展。
支持數字身份和區塊鏈身份驗證：未來 HTML5 可能會加強對數字身份和區塊鏈身份驗證技術的支持，為用戶提供更安全、去中心化的身份驗證方式，保護個人隱私和數據安全。
促進文化交流和多元化表達：HTML5 的發展也可能會促進文化交流和多元化表達，為不同文化背景的內容創作者提供更豐富的表現方式，推動文化多樣性和交流。
提升游戲開發和虛擬現實體驗：HTML5 可能會在游戲開發和虛擬現實領域有更大突破，為開發者提供更強大的游戲開發工具和技術，同時支持更逼真、沉浸式的虛擬現實體驗。
加強數據可視化和分析能力：未來 HTML5 可能會加強對數據可視化和分析能力的支持，為開發者提供更多圖表、圖形和交互式界面的展示方式，幫助用戶更好地理解和分析數據。
推進智能家居和智能城市發展：HTML5 的發展也可能會推進智能家居和智能城市的發展，為開發智能家居應用和智能城市解決方案提供更好的支持，提升生活質量和城市運行效率。
增強網絡媒體和流媒體能力：未來 HTML5 可能會加強對網絡媒體和流媒體的支持，提供更豐富的音視頻處理能力，為開發者提供更好的媒體播放和流媒體傳輸的功能和性能。
支持跨平臺和跨設備的開發：HTML5 的未來發展可能會更加注重跨平臺和跨設備的開發，為開發者提供統一的開發框架和工具，使應用能夠在不同的操作系統和設備上無縫運行。