对于实时聊天的功能，智学无忧专门做了一个vue的项目，上图，先睹为快。

1、高仿微信的界面（看到我的头像吗 ^_^）

2、与智能机器人聊天的界面（对方是美女啊 (¯﹃¯)）

具体实现的代码，我已经上传到附件，请下载附件后，按下面的步骤运行

1. 安装node.js的环境
2. 进入项目 cnpm i 安装需要的模块
3. npm run dev 运行项目
4. 按下F12，采用移动端模拟器的方式浏览。

聊天的话是在是太简单了

前端技术：

  通讯技术: websocket 

  ui:自己选择

  文件发送：form表单 

  表情：使用本地图片 匹配图片直接显示即可

注意：

websocket虽然链接很容易 但是想保持什么困难   手机息屏  浏览器切换切换tab pags等操作都有可能导致websocket断开链接   一定要做好重连的机制

          文件发送的话就直接使用ajax 模拟form表单提交 判断是图片的话你可以先转成base64直接显示，文件直接显示文件图标即可。然后websocket广播文件的类型及链接  over

表情的话你可以使用预设本地图片的方式，然后通过他点击的表情然后替换输入框中的字符串，需要你自己封装一下字符串编译的模板。

最后说下： 

要想让输入框支持html标签 你可以选择富文本 和 html5的contenteditable="true"   自带富文本标签效果 简直就是完美的不要不要的

websocket重连不用你写  有东西可以自动帮助你     点我飞机直达    

其他你自己百度一下就可以    然后就是字符串模板 

这是layui 的一个模板语法 你可以参考这里来写    






	//转换内容
	layui.data.content = function(content) {
		//支持的html标签
		var html = function(end) {
			return new RegExp('\\n*\\[' + (end || '') + '(code|pre|div|span|p|table|thead|th|tbody|tr|td|ul|li|ol|li|dl|dt|dd|h2|h3|h4|h5)([\\s\\S]*?)\\]\\n*', 'g');
		};
		content = (content || '').replace(/&(?!#?[a-zA-Z0-9]+;)/g, '&')
			.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/'/g, '&#39;').replace(/"/g, '&quot;') //XSS
			.replace(/@(\S+)(\s+?|$)/g, '@<a href="javascript:;">$1</a>$2') //转义@

			.replace(/face\[([^\s\[\]]+?)\]/g, function(face) { //转义表情
				var alt = face.replace(/^face/g, '');
				return '<img alt="' + alt + '" title="' + alt + '" src="' + faces[alt] + '">';
			})
			.replace(/img\[([^\s]+?)\]/g, function(img) { //转义图片
				return '<img class="layui-layim-photos" src="'+location.protocol+'//' + img.replace(/(^img\[)|(\]$)/g, '') + '">';
			})
			.replace(/file\([\s\S]+?\)\[[\s\S]*?\]/g, function(str) { //转义文件
				var href = (str.match(/file\(([\s\S]+?)\)\[/) || [])[1];
				var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1];
				if(!href) return str;
				return '<a class="layui-layim-file" href="' + href + '" download target="_blank"><i class="layui-icon">&#xe61e;</i><cite>' + (text || href) + '</cite></a>';
			})
			.replace(/audio\[([^\s]+?)\]/g, function(audio) { //转义音频
				return '<div class="layui-unselect layui-layim-audio" layim-event="playAudio" data-src="' + audio.replace(/(^audio\[)|(\]$)/g, '') + '"><i class="layui-icon">&#xe652;</i><p>音频消息</p></div>';
			})
			.replace(/video\[([^\s]+?)\]/g, function(video) { //转义音频
				return '<div class="layui-unselect layui-layim-video" layim-event="playVideo" data-src="' + video.replace(/(^video\[)|(\]$)/g, '') + '"><i class="layui-icon">&#xe652;</i></div>';
			})

			.replace(/a\([\s\S]+?\)\[[\s\S]*?\]/g, function(str) { //转义链接
				var href = (str.match(/a\(([\s\S]+?)\)\[/) || [])[1];
				var text = (str.match(/\)\[([\s\S]*?)\]/) || [])[1];
				if(!href) return str;
				return '<a href="' + href + '" target="_blank">' + (text || href) + '</a>';
			}).replace(html(), '\<$1 $2\>').replace(html('/'), '\</$1\>') //转移HTML代码
			.replace(/\n/g, '<br>') //转义换行 
		return content;
	};

又卡死了 上传图片 害的重新写了 个

websocket，知道有这么个东西没用过。