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版對講機（前端玩具）
......沒有想到

完。

eb前端開發工程師需要核心掌握HTML/CSS/JS開發，在幾年前HTML5標準進入國內后，得到了快速的應用于推廣，開發人員為了實現更多的效果和功能，將HTML5的應用推崇到了極高的位置。作為Web前端開發工程師你是否了解HTML5常用的開發工具呢？本文，千鋒武漢Web前端培訓小編列舉HTML5常用的10款開發工具！

1、Initializr——Initializr是制作HTML5網站頂好的入門輔助開發工具，你可以使用提供的特色模板迅速生成網站，也可以自定義，Initializr會為你生成代碼簡潔的可定制的網頁模板。

2、HTML5 visual cheat sheet——HTML5 visual cheat sheet是一個非常酷的速查手冊，每個Web開發人員的必備神器，可以幫助大家高速查找一個標簽或者屬性。

3、Cross browser HTML5 forms——HTML5中的日歷，取色板，滑塊部件等都是非常棒工具，但是有些瀏覽器不支持。Cross browser HTML5 forms還可以幫助你構建完美的HTML5表單兼容方案。

4、HTML5demos——HTML5demos會告訴你每一個HTML5特性在哪些瀏覽器中支持，比如說你的瀏覽器是否支持HTML5 Canvas?Safari是否可以運行簡單的HTML5聊天客戶端等問題。

5、Switch To HTML5——Switch To HTML5是一個基礎而實用的模板生成工具。

6、HTML5 Tracker——HTML5 Tracker可以跟蹤HTML5全新修訂信息。使用HTML5 Tracker可以了解HTML5的全新動向。

7、HTML5 Test——HTML5 Test會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。快快讓你的瀏覽器準備好迎接HTML5革命吧。

8、HTML5 Canvas cheat——sheet Canvas元素是HTML5的重要元素之一，它可以在網頁中繪制圖形，非常強大。這是一個Canvas元素的詳細速查手冊。

9、Lime JS——LimeJS是一個HTML5游戲開發框架，用于高速構建運行于觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。

10、HTML5 Reset——HTML5 Reset是一組文件，包括HTML、CSS等，用于在開始新項目的時候幫助你節省時間，提供HTML5的空白WordPress模板。

以上就是千鋒武漢Web前端培訓小編列舉的Web前端工程師需要了解的10個HTML5常用工具。這些工具在不同的開發領域發揮著極大的作用。你可以根據你現在從事的崗位對照一下，是否你已經掌握的這些比較高效的工具了呢？

如果你想學習Web前端，就來千鋒武漢Web前端培訓，大牛講師全程面授，嚴格管理，緊貼主流企業一線需求，助力學員畢業即高薪就業。現在還可以來千鋒武漢Web前端培訓，申請兩周免費試聽，親身感受講師的授課水平。

在線咨詢

上一篇：HTML 符號
下一篇：零基礎怎么學HTML5?小白想學web前端

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商