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小时内与您取得联系。

整合营销服务商