01 2023 档案

摘要:在线即时聊天项目,最重要的就是要实时收到消息,这里实现了vue.js下的websocket,实现了断线重连,并且可以根据收到的消息进行对应的处理 /** * 连接websocket */ connect () { var _this=this; let ws = new WebSocket(this 阅读全文
posted @ 2023-01-31 16:37 唯一客服系统开发笔记 阅读(338) 评论(0) 推荐(0) 编辑
摘要:在进入在线聊天界面以后,不管是历史消息,还是实时消息,都需要让最新消息展示出来。因此需要把聊天界面滚动到最底部 //滚动到底部 scrollBottom:function(){ var _this=this; this.$nextTick(function(){ var container = _t 阅读全文
posted @ 2023-01-31 15:27 唯一客服系统开发笔记 阅读(582) 评论(0) 推荐(0) 编辑
摘要:当访客一进去聊天界面以后,需要获取一下历史消息展示到界面,并且需要能分页的原理展示 在顶部有一个加载更多记录的按钮,点击就能按分页获取数据 //展示历史消息记录 getHistoryList(){ var _this=this; let pagesize=5; this.$axios.get(thi 阅读全文
posted @ 2023-01-31 13:20 唯一客服系统开发笔记 阅读(295) 评论(0) 推荐(0) 编辑
摘要:客服系统中在展示聊天消息时间的时候,根据当前日期与目标日期的情况进行缩短显示,如果是同一天,只显示小时、分钟、秒,如果是同一年,只显示月日小时、分钟、秒,否则显示全部,根据这样的缩短逻辑就可以进行显示了。 具体实现函数 //缩短时间 function shortTime(t){ let time=n 阅读全文
posted @ 2023-01-30 18:33 唯一客服系统开发笔记 阅读(117) 评论(0) 推荐(0) 编辑
摘要:访客进行聊天窗口以后,会出现几条自动欢迎的信息,这是怎么实现的呢? 其实纯粹是前端实现的效果,并不是后端延迟推送。前端一次性取回几条数据以后,延迟逐条展示出来的 这里就实现了一个函数,参数是一个对象数组,对象中元素有一个key是delay延迟的秒数,还有昵称头像等信息,可以传递一个回调函数,在回调函 阅读全文
posted @ 2023-01-30 17:38 唯一客服系统开发笔记 阅读(110) 评论(0) 推荐(0) 编辑
摘要:当我们的在线客服系统,输入框发送消息的时候,可以直接回车发送消息,并且要支持ctrl+enter是换行操作 那么我们的html事件部分是这样写 <textarea class="chatAreaInput" v-model="visitor.message" @keyup.ctrl.enter.ex 阅读全文
posted @ 2023-01-29 22:40 唯一客服系统开发笔记 阅读(394) 评论(0) 推荐(0) 编辑
摘要:我们在发送消息给用户的时候,都要进行过滤xss字符,xss是跨站脚本攻击,实质上就是发送了html或js代码,现在我们在vue项目中对内容进行一下过滤 在vue中安装如下: npm install xss 这样就在依赖里安装好了 直接在需要使用的页面 import xss from 'xss' 然后 阅读全文
posted @ 2023-01-29 21:39 唯一客服系统开发笔记 阅读(230) 评论(0) 推荐(0) 编辑
摘要:在聊天输入框的上方,一般会展示一些常问的关键词,访客点击以后直接回复设置的回答 展示效果如下图所示: 直接通过接口获取数据,循环展示数据就可以了 //获取常问关键词 getTopRequest(){ var _this=this; let entId=tools.getQuery("ent_id") 阅读全文
posted @ 2023-01-29 12:52 唯一客服系统开发笔记 阅读(110) 评论(0) 推荐(0) 编辑
摘要:截图功能 1、当您电脑打开了微信,按键盘 Alt + A 会出现截屏 2、当您电脑打开了QQ,按键盘 Crtl + Alt + A 会出现截屏 3、当您电脑打开了钉钉,按键盘 Crtl + Shift + A 会出现截屏 4、当您电脑打开了浏览器,一般在右上角都会有类似剪刀截屏的插件工具 5、系统自 阅读全文
posted @ 2023-01-29 11:59 唯一客服系统开发笔记 阅读(1654) 评论(0) 推荐(0) 编辑
摘要:访客的初始化,很多人可能会认为放到链接websocket的时候,通过ws去发送给服务端 但是这样会有一定的问题,因为如果网络不稳定或者ws链接断了,会进行不停的重连,这样会造次多次请求初始化流程 所以我会在链接websocket之前,调用一个HTTP的访客初始化接口,这样也方便进行限流,各种账户异常 阅读全文
posted @ 2023-01-20 14:18 唯一客服系统开发笔记 阅读(85) 评论(0) 推荐(0) 编辑
摘要:在开发客服系统的时候进行字符串拼接的太多,可以使用模板字符串处理 你可以使用ES6中的模板字符串来实现这个功能。模板字符串是用反引号(`)括起来的字符串,其中变量可以使用${}语法来嵌入。 例如,你可以这样使用模板字符串: let WebsocketHost = "localhost"; let v 阅读全文
posted @ 2023-01-20 13:47 唯一客服系统开发笔记 阅读(114) 评论(0) 推荐(0) 编辑
摘要:封装一个函数获取URL中的GET参数 需要支持锚点链接例如:http://localhost:8080/#/chatApp?ent_id=5 具体来说 var query = window.location.search.substring(1); var hash = window.locatio 阅读全文
posted @ 2023-01-19 23:26 唯一客服系统开发笔记 阅读(119) 评论(0) 推荐(0) 编辑
摘要:之前我一直使用的golang来开发客服系统,但是对于很多PHP开发者来说,有一定的学习成本。所以现在想使用PHP来实现下大体的思路,看看其中的区别 PHP是一种服务器端脚本语言,可用于开发Web应用程序,包括客服系统。WebMan框架是一个基于PHP的Web应用程序框架,可用于搭建客服系统。 现在就 阅读全文
posted @ 2023-01-19 00:28 唯一客服系统开发笔记 阅读(700) 评论(0) 推荐(0) 编辑
摘要:下载证书 curl - Extract CA Certs from Mozilla https://curl.se/docs/caextract.html 配置php.ini ,把路径放上去 搞定收工 阅读全文
posted @ 2023-01-18 23:38 唯一客服系统开发笔记 阅读(314) 评论(0) 推荐(0) 编辑
摘要:如果我们已经安装了PHP或者其他集成环境,但是在命令行执行php命令时还是报这个错误 那是因为没有配置环境变量 在此电脑上右键,然后看下面这张图 然后在Path变量上编辑,增加php的目录路径 然后重新开一个窗口执行下就oj了 阅读全文
posted @ 2023-01-18 23:32 唯一客服系统开发笔记 阅读(890) 评论(0) 推荐(0) 编辑
摘要:在聊天界面的输入框区域,我的实现代码是下面这样的 效果图 <div class="chatBottom"> <div class="chatArea"> <textarea class="chatAreaInput"></textarea> <div class="chatJiahaoBtn ico 阅读全文
posted @ 2023-01-15 16:59 唯一客服系统开发笔记 阅读(256) 评论(0) 推荐(0) 编辑
摘要:普通引入模式下是这样的 首先,您需要在iconfont.cn上创建一个账号并添加图标。 然后,将iconfont的链接代码加入到页面的head标签中,例如: <link rel="stylesheet" href="//at.alicdn.com/t/font_123456_abcdefghijkl 阅读全文
posted @ 2023-01-15 16:32 唯一客服系统开发笔记 阅读(329) 评论(0) 推荐(0) 编辑
摘要:接上面两篇继续,我来实现下对话框聊天界面,效果如下图: 全部代码: <template> <div class="chatAppBody"> <div class="chatTitle">标题</div> <div class="chatBox"> <div class="chatRow"> <el 阅读全文
posted @ 2023-01-14 13:20 唯一客服系统开发笔记 阅读(2016) 评论(0) 推荐(0) 编辑
摘要:我想要实现的效果是,三个元素,第一个是标题,第二个是消息列表是自适应高度的,第三个是输入框 <template> <div class="chatAppBody"> <div class="chatTitle">标题</div> <div class="chatBox">消息列表</div> <di 阅读全文
posted @ 2023-01-13 22:47 唯一客服系统开发笔记 阅读(229) 评论(0) 推荐(0) 编辑
摘要:Vue应用程序设置一些基本配置,包括使用依赖项,设置路由,挂载组件等。这样就可以使用Vue框架开发应用程序了 先来看看我的客服系统项目的package.json { "name": "VueLiveChat", "version": "0.0.1", "private": true, "script 阅读全文
posted @ 2023-01-13 22:14 唯一客服系统开发笔记 阅读(460) 评论(0) 推荐(0) 编辑
摘要:UniApp是一个使用 Vue.js 框架开发的跨平台应用程序,可以在 iOS、Android、H5、微信小程序、支付宝小程序、字节跳动小程序等多个平台上运行。 如果要在 UniApp 中接入第三方客服代码 如果要在 UniApp 中接入第三方客服系统(比如唯一客服系统gofly.v1kf.com) 阅读全文
posted @ 2023-01-12 23:06 唯一客服系统开发笔记 阅读(1106) 评论(0) 推荐(0) 编辑
摘要:在网站上自动邀请和主动邀请访客对话可以通过客服工具来实现。 自动邀请通常是在访客访问网站上的特定页面或访问时间达到一定时长后,使用 JavaScript 代码自动弹出邀请对话框。 主动邀请则是在客服人员手动点击按钮或手动发起邀请后,使用 JavaScript 代码弹出邀请对话框。 这些工具有很多种, 阅读全文
posted @ 2023-01-12 11:52 唯一客服系统开发笔记 阅读(145) 评论(0) 推荐(0) 编辑
摘要:人工客服系统对网站有许多好处,其中一些主要的有: 增加客户满意度: 客服人员可以直接回答客户的问题,提供有效的帮助,这可以提高客户对网站的满意度。 提高转化率: 通过实时互动和个性化沟通可以提高客户的转化率,增加销售额。 提高客户忠诚度: 客服人员可以通过与客户建立关系来提高客户对网站的忠诚度。 提 阅读全文
posted @ 2023-01-11 23:08 唯一客服系统开发笔记 阅读(203) 评论(0) 推荐(0) 编辑
摘要:我在自己的在线客服系统中实现了主动邀请在线访客聊天的功能 虽然前面四篇已经实现了大部分了,现在还是要简介下原理: 在网站中实时向在线访客推送消息可以使用 WebSockets 来实现。WebSockets 是一种在单个 TCP 连接上进行全双工通信的协议。它允许网页与服务器进行双向通信,而不必受到 阅读全文
posted @ 2023-01-11 16:06 唯一客服系统开发笔记 阅读(107) 评论(0) 推荐(0) 编辑
摘要:浏览器navigator能获取到一些有用的访客信息 可以使用 JavaScript 的 navigator 对象来获取当前浏览器的信息。 下面是 navigator 对象可以获取到的一些有用的信息: navigator.appCodeName:浏览器的代码名称。 navigator.appName: 阅读全文
posted @ 2023-01-09 20:50 唯一客服系统开发笔记 阅读(147) 评论(0) 推荐(0) 编辑
摘要:我开发的客服系统有中英文切换功能,并且能根据浏览器自动识别中英文 也可以根据url参数中的lang来识别,还能根据localStorge里面的参数进行识别 它会检查URL中是否有合法的lang参数,如果有,则直接返回。如果没有,则检查本地存储(local storage)中是否有合法的lang参数, 阅读全文
posted @ 2023-01-09 12:50 唯一客服系统开发笔记 阅读(112) 评论(0) 推荐(0) 编辑
摘要:在使用我的客服系统时,如果引入了我的js ,就可以实时看到网站上的所有访客了 使用 WebSocket 技术来实现实时通信。 在访客登录或退出时,向指定客服的 WebSocket 客户端发送消息。例如,你可以在访客登录时,向指定客服的 WebSocket 客户端发送一条消息,告诉客户端有一个新的访客 阅读全文
posted @ 2023-01-09 00:13 唯一客服系统开发笔记 阅读(92) 评论(0) 推荐(0) 编辑
摘要:经常我们有这样的需要,比如有一个对象数组,我们要把这个数组里某个对象删除掉,根据他的某一个key的value来删除 可以使用 JavaScript 的 filter() 方法来删除对象数组中指定 key 下 value 的对象。 例如,你可以使用下面的代码来删除对象数组中 age 属性为 18 的对 阅读全文
posted @ 2023-01-08 23:16 唯一客服系统开发笔记 阅读(815) 评论(0) 推荐(0) 编辑
摘要:再客服系统中如果想要链接websocket需要确定是ws:// 还是wss:// 所以,我封装了两个函数,用于获取URL中的协议是HTTP 还是HTTPS ,以及获取到域名部分 可以使用 JavaScript 中的 String.prototype.match() 方法来执行匹配操作,并使用第一个捕 阅读全文
posted @ 2023-01-08 22:46 唯一客服系统开发笔记 阅读(263) 评论(0) 推荐(0) 编辑
摘要:在访客进入聊天界面的时候,就要调用接口生成一个唯一ID标识 然后前端链接WebSocket的时候,传递这个访客ID进来 如果你想在前端访客连接时生成一个 UUID,可以使用 Go 语言的第三方库来生成 UUID。 推荐使用 github.com/satori/go.uuid 库。它是一个简单易用的 阅读全文
posted @ 2023-01-07 16:21 唯一客服系统开发笔记 阅读(174) 评论(0) 推荐(0) 编辑
摘要:我的客服系统使用的Golang+ Gin作为后端服务,所以下面的代码是演示demo 在 Go 语言中使用 Gin 框架实现 WebSocket 的方法如下: 安装 gin-gonic/websocket 库。 在 Gin 的路由处理函数中使用 ws.Upgrade 函数将 HTTP 连接升级为 We 阅读全文
posted @ 2023-01-07 14:12 唯一客服系统开发笔记 阅读(495) 评论(0) 推荐(0) 编辑
摘要:我在实现在客服系统的时候,前端是基于WebSocket来实时收取服务端消息的,详细的解释下 即时通讯一种常用的方法是使用 WebSocket。WebSocket 是一种通信协议,它允许浏览器和服务器进行全双工通信,也就是说,双方都可以同时发送和接收消息。 在前端使用 JavaScript 实现即时通 阅读全文
posted @ 2023-01-07 13:25 唯一客服系统开发笔记 阅读(315) 评论(0) 推荐(0) 编辑
摘要:我的客服聊天页面有多语言切换功能,是通过URL参数中的lang参数来进行区分的 如果要切换中英文或者其他语言,就需要动态更新URL参数中的lang参数,所以实现下面这个函数 //修改url参数 function changeURLPar(destiny, par, par_value) { var 阅读全文
posted @ 2023-01-06 23:04 唯一客服系统开发笔记 阅读(156) 评论(0) 推荐(0) 编辑
摘要:我在实现客服系统的过程中,使用layer实现右下角弹窗效果,现在需要自定义layer弹窗的标题和增加自定义按钮 layer.open({ type: 2, title: 'My Window<button class="btn btn-primary" id="btn-reload">Reload< 阅读全文
posted @ 2023-01-06 22:27 唯一客服系统开发笔记 阅读(200) 评论(0) 推荐(0) 编辑
摘要:如果你只想要实现右下角弹窗功能,你可以使用JavaScript库"layer"。 layer是一个开源的JavaScript库,可以帮助你快速地实现类似操作系统的弹出窗口效果。它提供了许多可定制的选项,可以帮助你创建各种各样的弹出窗口,例如信息框、对话框、提示框、加载框等。 要使用layer,你需要 阅读全文
posted @ 2023-01-06 22:13 唯一客服系统开发笔记 阅读(849) 评论(0) 推荐(0) 编辑
摘要:多商家商城系统和客服系统可以通过API进行数据对接其中的重点就是: 新商城商家注册后自动同步成为客服系统商家 老商城商家数据与客服系统商家同步 商城商家系统登录后,可以单点登录到客服系统 商城新商家账号注册到客服平台 调用注册客服接口 注册客服 商城中的老商家数据如何同步 这里面的问题是,商家商家的 阅读全文
posted @ 2023-01-05 15:38 唯一客服系统开发笔记 阅读(224) 评论(0) 推荐(0) 编辑
摘要:我的客服系统有一些接口是专门给内部调用的,只允许其他内部系统来调用,不允许随意访问,可以使用IP白名单机制 使用 Gin 框架实现 IP 白名单机制可以使用中间件的方式实现。你可以编写一个中间件函数,在每个请求到来时检查它的 IP 地址是否在白名单中,如果不在,则返回错误信息。 例如,你可以这样编写 阅读全文
posted @ 2023-01-05 12:52 唯一客服系统开发笔记 阅读(684) 评论(0) 推荐(0) 编辑
摘要:go build 命令好处 我开发了一套在线客服系统源码,使用了go build进行编译 在我的在线客服系统使用 go build 命令的主要好处是,它可以将 Go 程序编译成可执行文件,这样就可以将程序部署到生产环境中。 在生产环境中运行的程序通常是编译后的可执行文件,因为这样可以提高程序的执行效 阅读全文
posted @ 2023-01-05 11:47 唯一客服系统开发笔记 阅读(363) 评论(0) 推荐(0) 编辑
摘要:When I was implementing the online customer support chat system's popup effect JavaScript SDK, the SDK code that was publicly exposed was in the form 阅读全文
posted @ 2023-01-05 00:34 唯一客服系统开发笔记 阅读(26) 评论(0) 推荐(0) 编辑
摘要:当我在实现在线客服源码弹窗效果JavaScript SDK时,对外公开的SDK代码就是使用的自执行函数的形式。 使用自执行函数来实现 JavaScript SDK 有以下好处: 封装代码:自执行函数可以将你的 JavaScript 代码封装起来,从而避免在全局作用域中定义变量,防止变量名称冲突。 提 阅读全文
posted @ 2023-01-05 00:19 唯一客服系统开发笔记 阅读(190) 评论(0) 推荐(0) 编辑
摘要:如果你在网站中引入了多个版本的 JavaScript 库,并且在你的 JavaScript 中使用了同名的对象,则可能会出现对象名称冲突的情况。 使用命名空间来解决这个问题。例如,你可以在你的 JavaScript 中定义一个命名空间,将你的对象定义在命名空间中,然后使用命名空间的属性来访问你的对象 阅读全文
posted @ 2023-01-05 00:00 唯一客服系统开发笔记 阅读(89) 评论(0) 推荐(0) 编辑
摘要:There are several benefits to setting up email notification for an online customer service system: Improved customer experience: Email notification al 阅读全文
posted @ 2023-01-04 15:25 唯一客服系统开发笔记 阅读(65) 评论(0) 推荐(0) 编辑
摘要:为在线客服系统设置邮件通知具有以下几个好处: 改善客户体验:邮件通知可以让客户实时收到新消息或更新通知,这有助于提高他们对您的服务的整体体验。 提高效率:邮件通知可以帮助提高客服团队的效率,因为它们会在新消息和请求到达时立即收到通知,而不必不断检查更新。 改善沟通:邮件通知有助于改善客服团队和客户之 阅读全文
posted @ 2023-01-04 15:15 唯一客服系统开发笔记 阅读(145) 评论(0) 推荐(0) 编辑
摘要:There are a number of benefits to adding browser notifications to an online customer service system, including: Improved user experience: Browser noti 阅读全文
posted @ 2023-01-04 14:30 唯一客服系统开发笔记 阅读(43) 评论(0) 推荐(0) 编辑
摘要:The main reason for removing HTML tags in online customer service systems is to prevent malicious users from attacking the website or other users by i 阅读全文
posted @ 2023-01-04 13:28 唯一客服系统开发笔记 阅读(22) 评论(0) 推荐(0) 编辑
摘要:在线客服系统中除去HTML标签的主要原因是为了防止恶意用户通过输入恶意的HTML代码来攻击网站或其他用户。 例如,如果你不过滤用户输入的HTML,一个恶意用户可能会输入下面这段代码: <script> window.location = 'http://hacker-website.com'; </ 阅读全文
posted @ 2023-01-04 13:19 唯一客服系统开发笔记 阅读(91) 评论(0) 推荐(0) 编辑
摘要:Implementing a message sound notification effect in self hosted private support chat softwarecan bring many benefits, including: Improving the user ex 阅读全文
posted @ 2023-01-04 12:39 唯一客服系统开发笔记 阅读(43) 评论(0) 推荐(0) 编辑
摘要:在在线客服系统中实现消息声音提醒效果可以带来许多好处,包括: 改善用户体验:通知声音可以帮助提醒用户有新消息,鼓励他们及时回复,提高整体用户体验。 提高生产率:通过提醒用户有新消息,通知声音可以帮助他们专注并及时处理客服任务,提高生产率。 提高客户满意度:通知声音可以帮助企业更快地回复客户咨询和问题 阅读全文
posted @ 2023-01-04 00:38 唯一客服系统开发笔记 阅读(165) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示