摘要：
之前在搜索婚纱摄影服务的时候，很多大的品牌机构都有自己的网站，浏览这些网站就能看到他们的营销思路 打开网站以后就能看到右下角弹出了咨询弹窗 在咨询弹窗内会自动回复多条消息，一般是简单介绍自己的品牌，强调自己是人工在线，让访客开口咨询，以及引导加微信 在输入框上方会设置一个常用搜索词，点击常用搜索词，
阅读全文
posted @ 2023-02-14 13:16
唯一客服系统开发笔记
阅读(249)
推荐(0)
摘要：
在开发webRTC的语音和视频通话功能的时候，需要展示出媒体流，这样就需要一个下面这样的效果 html部分代码 <!--视频--> <div class="remoteVideoMask"> <img id="remoteVideoMaskLogo" :src="noticeAvatar" /> <
阅读全文
posted @ 2023-02-13 22:30
唯一客服系统开发笔记
阅读(293)
推荐(0)
摘要：
绝对定位 + 负边距：使用绝对定位并设置左右负边距和上下负边距，就可以实现水平和垂直居中的效果。 .center-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } flex 布
阅读全文
posted @ 2023-02-13 21:33
唯一客服系统开发笔记
阅读(205)
推荐(0)
摘要：
当我们接收到音视频流MediaStream对象以后，我们需要知道这是视频还是音频 才能去以正确的标签展示，可以看下面的判断 console.log("call stream",remoteStream); var videoTracks = remoteStream.getVideoTracks()
阅读全文
posted @ 2023-02-12 23:37
唯一客服系统开发笔记
阅读(61)
推荐(0)
摘要：
webRTC机制和peerjs库的介绍在其他博客中已经有了很多介绍，这里我直接搬运过来 一、webrtc回顾 WebRTC（Web Real-Time Communication）即：网页即时通信。 简单点讲，它可以实现浏览器网页与网页之间的音视频实时通信（或传输其它任何数据)，目前主流浏览器都支持
阅读全文
posted @ 2023-02-12 22:59
唯一客服系统开发笔记
阅读(735)
推荐(0)
摘要：
getUserMedia() 是一个 JavaScript API，允许你访问用户的音频和视频设备（如摄像头和麦克风）。在不同的浏览器中，它的实现略有不同，但是你可以使用以下代码来实现一个最兼容的版本： //兼容的getUserMedia function getCompatibleUserMedi
阅读全文
posted @ 2023-02-11 16:48
唯一客服系统开发笔记
阅读(356)
推荐(0)
摘要：
通过嵌入JS代码的方式 UniApp是一个使用 Vue.js 框架开发的跨平台应用程序，可以在 iOS、Android、H5、微信小程序、支付宝小程序、字节跳动小程序等多个平台上运行。 如果要在 UniApp 中接入第三方客服代码 如果要在 UniApp 中接入第三方客服系统（比如唯一客服系统gof
阅读全文
posted @ 2023-02-11 15:19
唯一客服系统开发笔记
阅读(1413)
推荐(0)
摘要：
很多App都有能直接在App内找到客服咨询入口，方便及时解决客户问题。 如果你的app也想要配置客服系统，怎么才能实现？ App内需要添加好一个客户咨询按钮，然后在客服咨询按钮点击后跳转到H5客服聊天页面，用户可以在H5页面进行问题咨询，如下图示界面 用户离线后怎么通知它？ 唯一客服系统有客服消息回
阅读全文
posted @ 2023-02-11 11:57
唯一客服系统开发笔记
阅读(469)
推荐(0)
摘要：
当我们的网站收到一条新消息的时候，需要能通知给正在访问网页的人员 浏览器打开的情况下，可以展示在电脑桌面右下角（需要在HTTPS环境下） //浏览器桌面通知 function notify(title, options, callback) { // 先检查浏览器是否支持 if (!window.N
阅读全文
posted @ 2023-02-11 00:39
唯一客服系统开发笔记
阅读(485)
推荐(0)
摘要：
快速开始 OpenAI 训练了非常擅长理解和生成文本的尖端语言模型。我们的 API 提供对这些模型的访问，可用于解决几乎任何涉及处理语言的任务。 在本快速入门教程中，您将构建一个简单的示例应用程序。 在此过程中，您将学习使用 API 完成任何任务的关键概念和技术，包括： 内容生成 总结 分类、分类和
阅读全文
posted @ 2023-02-10 23:06
唯一客服系统开发笔记
阅读(690)
推荐(0)
摘要：
openai文本生成接口，是根据模型来确定价格的，不同的模型价格不同 有三个月的免费18美元试用额度 基础模型 Ada （艾达最快）每1000 tokens是$0.0004 Babbage（巴贝奇）每1000 tokens是$0.0005 Curie（居里）每1000 tokens是$0.0020
阅读全文
posted @ 2023-02-10 11:34
唯一客服系统开发笔记
阅读(1740)
推荐(0)
摘要：
使用 OpenAI 的强大模型构建下一代应用程序。 GPT-3可以执行各种自然语言任务、Codex 可以将自然语言转换为代码的 ，DALL·E，用于创建和编辑原始图像。 DALL·E 开发人员现在可以开始使用，已经有超过3万人已经在使用DALL·E来扩展他们的创造力并加快他们的工作流程，每天生成超过
阅读全文
posted @ 2023-02-10 10:59
唯一客服系统开发笔记
阅读(550)
推荐(0)
摘要：
介绍 概述 OpenAI API 几乎可以应用于任何涉及理解或生成自然语言或代码的任务。我们提供一系列具有不同功率水平的型号，适用于不同的任务，并能够微调您自己的定制模型。这些模型可用于从内容生成到语义搜索和分类的所有内容。 关键概念 我们建议完成快速入门教程，通过动手的交互式示例熟悉关键概念。 快
阅读全文
posted @ 2023-02-09 13:35
唯一客服系统开发笔记
阅读(1103)
推荐(0)
摘要：
经过前面几篇的开发，已经实现了基本逻辑，现在公开出来进行测试 注册并生成好自己的密钥，把密钥放入下面的网址中 https://gofly.v1kf.com/vue/index.html#/chatGPT?secret=密钥 感兴趣的朋友可以点击下面网址 演示网址
阅读全文
posted @ 2023-02-07 19:08
唯一客服系统开发笔记
阅读(466)
推荐(0)
摘要：
在根目录下添加 `vue.config.js`作为配置文件 module.exports = { //配置 运行和打包时的文件路径 publicPath:process.env.NODE_ENV 'production'?'./':'/', } 重新打包，就可以了 npm run build
阅读全文
posted @ 2023-02-07 18:54
唯一客服系统开发笔记
阅读(311)
推荐(0)
摘要：
如果想实现chatGPT的网页版，调用接口就可以了，但是如果需要联系上下文语境，就需要在传递的数据的时候进行下拼接 传参的时候对所有的对话数据进行拼接，拼成下面这样 {"prompt":"(You:在吗\n)这里在哦，有什么可以帮助你的吗？(You:你这个系统多少钱\n)抱歉，您想知道什么？这里是客
阅读全文
posted @ 2023-02-07 13:01
唯一客服系统开发笔记
阅读(3997)
推荐(0)
摘要：
通过前面两篇我们已经能够知道通过接口获取chatGPT的内容了 下面这个是服务端调用chatGPT接口的代码案例： package lib import ( "fmt" "kefu/tools" "log" ) type ChatGptTool struct { Secret string } fu
阅读全文
posted @ 2023-02-06 23:02
唯一客服系统开发笔记
阅读(2654)
推荐(0)
摘要：
我们可以知道chatGPT的公开接口为： 请求接口： URL:-POST https://api.openai.com/v1/completions headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' +
阅读全文
posted @ 2023-02-06 22:48
唯一客服系统开发笔记
阅读(7628)
推荐(0)
摘要：
首先前提是已经注册了openai的会员然后，登入系统后 可以查看右上角 点击生成一个密钥 这样我们就得到了密钥
阅读全文
posted @ 2023-02-06 22:20
唯一客服系统开发笔记
阅读(2705)
推荐(0)
摘要：
vue项目的路由就相当于我们在网址url上输入的地址，访问的具体网址就是路由 拿到项目先看看路由文件，就能知道具体的访问地址了 例如下面的router.js import Vue from 'vue' import Router from 'vue-router' //登录页 import Logi
阅读全文
posted @ 2023-02-04 21:38
唯一客服系统开发笔记
阅读(257)
推荐(0)
摘要：
Vue 中使用静态资源的方式有以下几种： 直接使用 URL 地址： 在模板中直接使用静态资源的 URL 地址即可，如： <img src="https://example.com/img/logo.png" alt="Logo"> 使用 require 语句： 通过 require 语句引入静态资源
阅读全文
posted @ 2023-02-04 14:00
唯一客服系统开发笔记
阅读(115)
推荐(0)
摘要：
在之前的文章里没有介绍vue项目的目录结构，现在来介绍一下 Vue 项目的目录结构通常如下： . |-- public | |-- favicon.ico | |-- index.html |-- src | |-- assets | | |-- ... | |-- components | | |
阅读全文
posted @ 2023-02-04 12:51
唯一客服系统开发笔记
阅读(172)
推荐(0)
摘要：
我们客服系统的消息列表中，会有产品卡片展示，这个是怎么实现的呢 产品信息其实就是下面这个字符串 product[{"title":"纯坚果零食大礼包一整箱干果类网红爆款解馋小吃休闲食品送女友","price":"￥9.9","img":"https://img.alicdn.com/bao/uplo
阅读全文
posted @ 2023-02-04 12:27
唯一客服系统开发笔记
阅读(85)
推荐(0)
摘要：
我们在使用淘宝的时候，在商品页面点击在线客服，跳转到客服聊天页以后，会浮动出当前产品信息，可以把产品信息发给客服 现在我们也实现了类似功能，可以带着产品信息进聊天页面 在访客聊天连接中，加入extra参数 将base64加密的json字符串作为extra参数传递，可以参考下面json: base64
阅读全文
posted @ 2023-02-03 16:49
唯一客服系统开发笔记
阅读(309)
推荐(0)
摘要：
我们最早接触的聊天工具应该是QQ，在线聊天的客服系统应该是淘宝，我们每天都在使用这些工具去解决我们生活聊天上的一些诉求，却很少会有人有机会去了解它底层的一些逻辑和框架。这次我将我工作中的经验进行总结，做一些简单的分享。 客服系统的产品框架通常包括以下几个关键组件： 客户端：客户端是客服系统的用户界面
阅读全文
posted @ 2023-02-02 23:06
唯一客服系统开发笔记
阅读(1798)
推荐(0)
摘要：
有些参数需要在url的GET里传递，但是为了防止特殊字符问题，我转成了base64编码。 但是js进行解码的时候，总是报错： 报错: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly enc
阅读全文
posted @ 2023-02-02 14:00
唯一客服系统开发笔记
阅读(173)
推荐(0)
摘要：
最早设计多商户在线客服系统的时候，没有给每一个商家设置一个唯一ID，是拿自增ID代替的。 现在给每个商家单独设计一个唯一UUID，生成好后更新到所有的用户数据里 生成UUID package tools import ( "crypto/md5" "encoding/hex" "github.com
阅读全文
posted @ 2023-02-01 15:58
唯一客服系统开发笔记
阅读(49)
推荐(0)
摘要：
在开发在线客服系统的时候，有某些地方需要使用脚本去批量执行SQL语句，这个时候就需要使用简单的执行SQL的封装函数了 查询操作是使用的原生的sql库，没用Gorm，原因是Gorm的Raw Scan必须要定义好结构体，原生的可以不需要了。执行查询语句时，将查询结果返回为[]map[string]int
阅读全文
posted @ 2023-02-01 14:28
唯一客服系统开发笔记
阅读(99)
推荐(0)
摘要：
在线即时聊天项目，最重要的就是要实时收到消息，这里实现了vue.js下的websocket，实现了断线重连，并且可以根据收到的消息进行对应的处理 /** * 连接websocket */ connect () { var _this=this; let ws = new WebSocket(this
阅读全文
posted @ 2023-01-31 16:37
唯一客服系统开发笔记
阅读(419)
推荐(0)
摘要：
在进入在线聊天界面以后，不管是历史消息，还是实时消息，都需要让最新消息展示出来。因此需要把聊天界面滚动到最底部 //滚动到底部 scrollBottom:function(){ var _this=this; this.$nextTick(function(){ var container = _t
阅读全文
posted @ 2023-01-31 15:27
唯一客服系统开发笔记
阅读(701)
推荐(0)
摘要：
当访客一进去聊天界面以后，需要获取一下历史消息展示到界面，并且需要能分页的原理展示 在顶部有一个加载更多记录的按钮，点击就能按分页获取数据 //展示历史消息记录 getHistoryList(){ var _this=this; let pagesize=5; this.$axios.get(thi
阅读全文
posted @ 2023-01-31 13:20
唯一客服系统开发笔记
阅读(342)
推荐(0)
摘要：
客服系统中在展示聊天消息时间的时候，根据当前日期与目标日期的情况进行缩短显示，如果是同一天，只显示小时、分钟、秒，如果是同一年，只显示月日小时、分钟、秒，否则显示全部，根据这样的缩短逻辑就可以进行显示了。 具体实现函数 //缩短时间 function shortTime(t){ let time=n
阅读全文
posted @ 2023-01-30 18:33
唯一客服系统开发笔记
阅读(133)
推荐(0)
摘要：
访客进行聊天窗口以后，会出现几条自动欢迎的信息，这是怎么实现的呢？ 其实纯粹是前端实现的效果，并不是后端延迟推送。前端一次性取回几条数据以后，延迟逐条展示出来的 这里就实现了一个函数，参数是一个对象数组，对象中元素有一个key是delay延迟的秒数，还有昵称头像等信息，可以传递一个回调函数，在回调函
阅读全文
posted @ 2023-01-30 17:38
唯一客服系统开发笔记
阅读(132)
推荐(0)
摘要：
当我们的在线客服系统，输入框发送消息的时候，可以直接回车发送消息，并且要支持ctrl+enter是换行操作 那么我们的html事件部分是这样写 <textarea class="chatAreaInput" v-model="visitor.message" @keyup.ctrl.enter.ex
阅读全文
posted @ 2023-01-29 22:40
唯一客服系统开发笔记
阅读(443)
推荐(0)
摘要：
我们在发送消息给用户的时候，都要进行过滤xss字符，xss是跨站脚本攻击，实质上就是发送了html或js代码，现在我们在vue项目中对内容进行一下过滤 在vue中安装如下： npm install xss 这样就在依赖里安装好了 直接在需要使用的页面 import xss from 'xss' 然后
阅读全文
posted @ 2023-01-29 21:39
唯一客服系统开发笔记
阅读(254)
推荐(0)
摘要：
在聊天输入框的上方，一般会展示一些常问的关键词，访客点击以后直接回复设置的回答 展示效果如下图所示： 直接通过接口获取数据，循环展示数据就可以了 //获取常问关键词 getTopRequest(){ var _this=this; let entId=tools.getQuery("ent_id")
阅读全文
posted @ 2023-01-29 12:52
唯一客服系统开发笔记
阅读(128)
推荐(0)
摘要：
截图功能 1、当您电脑打开了微信，按键盘 Alt + A 会出现截屏 2、当您电脑打开了QQ，按键盘 Crtl + Alt + A 会出现截屏 3、当您电脑打开了钉钉，按键盘 Crtl + Shift + A 会出现截屏 4、当您电脑打开了浏览器，一般在右上角都会有类似剪刀截屏的插件工具 5、系统自
阅读全文
posted @ 2023-01-29 11:59
唯一客服系统开发笔记
阅读(1704)
推荐(0)
摘要：
访客的初始化，很多人可能会认为放到链接websocket的时候，通过ws去发送给服务端 但是这样会有一定的问题，因为如果网络不稳定或者ws链接断了，会进行不停的重连，这样会造次多次请求初始化流程 所以我会在链接websocket之前，调用一个HTTP的访客初始化接口，这样也方便进行限流，各种账户异常
阅读全文
posted @ 2023-01-20 14:18
唯一客服系统开发笔记
阅读(104)
推荐(0)
摘要：
在开发客服系统的时候进行字符串拼接的太多，可以使用模板字符串处理 你可以使用ES6中的模板字符串来实现这个功能。模板字符串是用反引号（`）括起来的字符串，其中变量可以使用${}语法来嵌入。 例如，你可以这样使用模板字符串： let WebsocketHost = "localhost"; let v
阅读全文
posted @ 2023-01-20 13:47
唯一客服系统开发笔记
阅读(134)
推荐(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
唯一客服系统开发笔记
阅读(145)
推荐(0)
浙公网安备 33010602011771号