客服客户聊天系统源码分享[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

静态H5聊天对话框html源码客服系统代码（3）

此程序 可用作客户与客服聊天使用，也可以作为app程序嵌入的聊天功能或者站内聊天使用的代码。

运行视频效果：

链接: https://pan.baidu.com/s/1lMbXgY3rVRw4ZFfwePJOTw 提取码: bfyh 复制这段内容后打开百度网盘手机App，操作更方便哦

静态H5聊天输入对话框html代码（1）

静态H5聊天输入对话框html代码（2）

上节讲了消息对话如何实现，上节规划中是来如何实现做到推送实时刷新，看了bass的接口，如果要做到这样的效果必须要先开通99月每月的套餐才能使用其数据库监听的功能。

我一看，暂时每用这个付费的套餐，我打算先用 轮询刷新的方式实现这个功能，轮询的话，暂定5秒。也就是说5秒刷新一次。

直接上代码：

function getMsgFromServer(fromTime){

		const query = Bmob.Query("ChatContent");
		query.containedIn("fromDeviceID", [""+fromDeviceID,""+toDeviceID]);
		query.containedIn("toDeviceID", [""+fromDeviceID,""+toDeviceID]);
		query.limit(300);
		if(fromTime != null){
			query.equalTo("createdAt",">",fromTime);
			query.equalTo("objectId","!=",unusedCheckMsgObjectid);

		}
		query.order("-createdAt");
		//query.or(query1, query2);
		query.find().then(res => {
 		    console.log(res)
			for(var i = res.length-1; i >=0; i--) {
				startCheckMsgTime = res[0].createdAt;
				unusedCheckMsgObjectid = res[0].objectId;
				if(res[0].objectId ==(unusedCheckMsgObjectid1)){
					continue;
				}
 				var item = res[i];
				 AddMsg(item.fromDeviceID,item.toDeviceID, item.createdAt,SendMsgDispose(item.content));
			}
		});
	}

上面代码就是刷新的业务，刚刚进来时候 刷出历史消息。

刷新后然后记录上次刷新的时间，然后 从这个时间点往后刷新。比如下午2点刷新到消息后，记录下这个时间，然后5秒刷新一次。如果没刷新到消息，继续按这个时间刷新，如果刷新到新的消息，则重新把起始的时间设置过去，以此为起点。

这样做的好处就是避免查询到相同的消息，重复显示出来。

如果是使用付费的套餐业务，需要99一个月，可以通过长链接的方式监听服务器的变化，比如某一行修改或者被删除，客户端都能收到回调。这个套餐目前是99月，老实说也不算贵，如果用户起来的话。

用于一多，很多长连接，这种bass起始也难吃得消，可能需要开其他的套餐，规模上去一个与一千多服务套餐应该是够用的。

通过上图中的效果，实际完全是可以实现基本客服的功能。

之前说过，通过给上面传递参数 控制，让用户与用户之间联系完全是可以的。

只需要传递响应的参数。

如下：

Chat.html?fromDeviceID=default&toDeviceID=xhrdd03t6e

default 我这边默认为管理员的ID.

xhrdd03t6e为用户的ID.