整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
著vue3.x越來越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫，在2021年必然受到開發(fā)者的再一次熱捧。
Vue3迭代更新頻繁，目前star高達(dá)20.2K+。
// 官網(wǎng)地址
https://v3.vuejs.org/Vitejs目前的star達(dá)到15.7K+。
// 官網(wǎng)地址
https://vitejs.dev/vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實例。
以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。
大家看到的所有彈窗功能，均是自己開發(fā)的vue3.0自定義彈窗V3Layer組件。
前段時間有過一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話可以去看看。
vue3.0系列：Vue3自定義PC端彈窗組件V3Layer
為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現(xiàn)。
v3scroll 一款輕量級的pc桌面端模擬滾動條組件。支持是否原生滾動條、自動隱藏、滾動條大小/層疊/顏色等功能。
大家感興趣的話，可以去看看這篇分享。
Vue3.0系列：vue3定制美化滾動條組件v3scroll
/**
* Vue3.0項目配置
*/
const path = require('path')
module.exports = {
// 基本路徑
// publicPath: '/',
// 輸出文件目錄
// outputDir: 'dist',
// assetsDir: '',
// 環(huán)境配置
devServer: {
// host: 'localhost',
// port: 8080,
// 是否開啟https
https: false,
// 編譯完是否打開網(wǎng)頁
open: false,
// 代理配置
// proxy: {
// '^/api': {
// target: '<url>',
// ws: true,
// changeOrigin: true
// },
// '^/foo': {
// target: '<other_url>'
// }
// }
},
// webpack配置
chainWebpack: config => {
// 配置路徑別名
config.resolve.alias
.set('@', path.join(__dirname, 'src'))
.set('@assets', path.join(__dirname, 'src/assets'))
.set('@components', path.join(__dirname, 'src/components'))
.set('@layouts', path.join(__dirname, 'src/layouts'))
.set('@views', path.join(__dirname, 'src/views'))
}
}// 引入餓了么ElementPlus組件庫
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'
// 引入vue3滾動條組件v3scroll
import V3Scroll from '@components/v3scroll'
// 引入公共組件
import WinBar from '../layouts/winbar.vue'
import SideBar from '../layouts/sidebar'
import Middle from '../layouts/middle'
import Utils from './utils'
const Plugins = app => {
app.use(ElementPlus)
app.use(V3Layer)
app.use(V3Scroll)
// 注冊公共組件
app.component('WinBar', WinBar)
app.component('SideBar', SideBar)
app.component('Middle', Middle)
app.provide('utils', Utils)
}
export default Plugins項目中主面板毛玻璃效果(虛化背景)
<!-- //虛化背景（毛玻璃） -->
<div class="vui__bgblur">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" class="blur-svg" viewBox="0 0 1920 875" preserveAspectRatio="none">
<filter id="blur_mkvvpnf"><feGaussianBlur in="SourceGraphic" stdDeviation="50"></feGaussianBlur></filter>
<image :xlink:href="store.state.skin" x="0" y="0" width="100%" height="100%" externalResourcesRequired="true" xmlns:xlink="http://www.w3.org/1999/xlink" style="filter:url(#blur_mkvvpnf)" preserveAspectRatio="none"></image>
</svg>
<div class="blur-cover"></div>
</div>vue3.0中使用全局路由鉤子攔截登錄狀態(tài)。
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判斷當(dāng)前路由地址是否需要登錄權(quán)限
if(to.meta.requireAuth) {
if(token) {
next()
}else {
// 未登錄授權(quán)
V3Layer({
content: '還未登錄授權(quán)！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
onEnd: () => {
next({ path: '/login' })
}
})
}
}else {
next()
}
})如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。
編輯器抽離了一個公共的Editor.vue組件。
<template>
<div
ref="editorRef"
class="editor"
contentEditable="true"
v-html="editorText"
@click="handleClick"
@input="handleInput"
@focus="handleFocus"
@blur="handleBlur"
style="user-select:text;-webkit-user-select:text;">
</div>
</template>另外還支持粘貼截圖發(fā)送，通過監(jiān)聽paste事件，判斷是否是圖片類型，從而發(fā)送截圖。
editorRef.value.addEventListener('paste', function(e) {
let cbd = e.clipboardData
let ua = window.navigator.userAgent
if(!(e.clipboardData && e.clipboardData.items)) return
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i]
// console.log(item)
// console.log(item.kind)
if(item.kind == 'file') {
var blob = item.getAsFile()
if(blob.size === 0) return
// 讀取圖片記錄
var reader = new FileReader()
reader.readAsDataURL(blob)
reader.onload = function() {
var _img = this.result
// 返回圖片給父組件
emit('pasteFn', _img)
}
}
}
})還支持拖拽圖片至聊天區(qū)域進(jìn)行發(fā)送。
<div class="ntMain__cont" @dragenter="handleDragEnter" @dragover="handleDragOver" @drop="handleDrop">
// ...
</div>const handleDragEnter = (e) => {
e.stopPropagation()
e.preventDefault()
}
const handleDragOver = (e) => {
e.stopPropagation()
e.preventDefault()
}
const handleDrop = (e) => {
e.stopPropagation()
e.preventDefault()
// console.log(e.dataTransfer)
handleFileList(e.dataTransfer)
}
// 獲取拖拽文件列表
const handleFileList = (filelist) => {
let files = filelist.files
if(files.length >= 2) {
v3layer.message({icon: 'error', content: '暫時支持拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
return false
}
for(let i = 0; i < files.length; i++) {
if(files[i].type != '') {
handleFileAdd(files[i])
}else {
v3layer.message({icon: 'error', content: '目前不支持文件夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})
}
}
}大家如果感興趣可以自己去試試哈。
ok，基于vue3+element-plus開發(fā)仿微信/QQ聊天實戰(zhàn)項目就分享到這里。
基于vue3.0+vant3移動端聊天實戰(zhàn)|vue3聊天模板實例
為上篇文章被頭條檢測為廣告嫌疑，可能是有其他網(wǎng)站的地址和下載鏈接。頭條系統(tǒng)已經(jīng)不再給我推薦，所以本次再寫一次，這次不打廣告，也不放鏈接了。
大家看看華為商城的客服系統(tǒng)，有沒有想過到底是如何制作出來的。你和客服MM的一問一答到底是如何實現(xiàn)的？學(xué)過ajax的朋友肯定知道，可以使用輪詢方式，隔一秒到服務(wù)器里面去查詢是否有聊天信息的到來，如果有，就取出來。這樣肯定是可以的。但是這樣做服務(wù)器壓力實在太大。如果有很多人在聊天呢？服務(wù)器可能受不了，所以，我們今天來使用WebSocket技術(shù)。該技術(shù)的特別之處在于，與HTTP協(xié)議最大的不同是，HTTP協(xié)議需要請求一次，響應(yīng)一次。而WebSocket使用的是協(xié)議是，一次握手，時時通訊。意思就是，第一次采用http協(xié)議握手完成之后，后面的鏈接就一直會保持，服務(wù)器也可以向客戶端發(fā)送信息。而不再是單向的通訊方式了。
華為客服系統(tǒng)
當(dāng)然，制作這個客服聊天系統(tǒng)確實不容易，但是如果我們只想做個簡單的網(wǎng)頁聊天那還是沒有問題的。
接下來，我給大家貼出一些關(guān)鍵代碼，給大家演示如何開發(fā)出一個網(wǎng)頁聊天系統(tǒng)。
必備技能：
html，css，javaScript，java，javaWeb，tomcat服務(wù)器，數(shù)據(jù)庫mysql。
1 首頁，必須寫一個登陸頁面，如果沒有登錄功能，那么網(wǎng)頁對方就不知道你的身份了。大部分情況都是需要登錄的。當(dāng)然如果不登錄，也是可以的，系統(tǒng)可以給你指定一個稱呼，目前大多數(shù)客服系統(tǒng)都是 有登錄的。
登錄代碼
登錄界面
登錄使用的是jquery的ajax向servlet發(fā)送請求，servlet調(diào)用數(shù)據(jù)庫dao查詢是否存在賬號。這個步驟如果不會的話，那需要將javaScript和javaWeb學(xué)習(xí)一遍。
2 寫一個聊天的界面，這個界面代碼較多，但是大家可以去各種素材網(wǎng)站找模板，不用自己寫的，copy就行了。
登錄后的界面
webSocket代碼
后臺，我們采用的是java代碼。這里因為是入門，我們沒有采用spring框架，而是采用了最基本的webSocket包。這兩個包可以在tomcat文件夾下面的lib文件夾找到。
使用的包
前后臺通訊方式采用的是json方式。所以引入了Gson包。
數(shù)據(jù)庫使用了兩個表：
非常簡單的表，mysql可以直接使用
后臺部分代碼
主要使用的是@ServerEndpoint注解，以及@OnOpen@OnMessage注解。
@ServerEndpoint注解表示ws的路徑。
@OnOpen表示連接時觸發(fā)該方法
@OnMessage 表示服務(wù)器收到消息時觸發(fā)
聊天時可以發(fā)送圖片和表情
發(fā)送圖片文件采用的方式還是http方式。
將發(fā)送人和接收人和文件使用FormData封裝起來，然后使用ajax保存到服務(wù)器中。然后再將服務(wù)器保存的地址發(fā)給對方。
聊天系統(tǒng)沒有加密。只是簡單的制作。有興趣的可以私聊我，可以發(fā)源代碼給你，因為平臺限制，不能在文章發(fā)鏈接，見諒了。
頁收發(fā)消息是一個常見的系統(tǒng)應(yīng)用場景，通常我們有兩種方式來完成消息的發(fā)送，一種是通過客戶端來拉取消息，一種是服務(wù)端推送消息，到底使用哪種方式好一點呢？
具體使用哪種方式，我們需要根據(jù)實際的業(yè)務(wù)場景來分析，沒有絕對正確的方式，只有適不適合。所以，我們分析一下網(wǎng)頁端的用戶一般都存在哪些應(yīng)用場景：
我們拋開純技術(shù)實現(xiàn)不談，只是從解決方案來談，由于是使用的是網(wǎng)頁端，HTTP協(xié)議是通過“請求-響應(yīng)”的方式傳遞，網(wǎng)頁端和服務(wù)端之間是沒有消息通道的，那么怎么來實現(xiàn)消息的接收呢？
輪詢拉取可以說是所有消息的實現(xiàn)方案中最簡單的一種，實現(xiàn)起來也非常簡單。
大致的實現(xiàn)方法如下：
這種方式最大的優(yōu)勢就是實現(xiàn)非常簡單，而且容易理解，早期的聊天室基本都是這種實現(xiàn)方式，我曾經(jīng)給朋友做過一個答題的系統(tǒng)，有多個終端，每個終端看到的內(nèi)容需要有所不同，也是使用的這種實現(xiàn)方式。
當(dāng)然這種實現(xiàn)方式的缺點也是非常明顯：
使用這種方式，時效性和效率是矛盾的，我降低timer的間隔時間，就可以提高時效性，但是會降低效率，例如：間隔時間降低到1秒，這種基本就可以趨近于實時了，但是可能300次輪詢才會拉到1條消息，有效性只有0.3%了。
所以，由于這個不可調(diào)和的矛盾存在，這種解決方案只能適用于一些同時在線用戶少，對實時性要求不高的場景中。
如果想要同時保證時效性和效率，其實長連接是一個不錯的選擇，一般我們的PC端聊天軟件都是使用的長連接方式來實現(xiàn)。而網(wǎng)頁端的長連接實現(xiàn)方式通常有兩種：
FlashSocket就不說了，如果不是網(wǎng)頁游戲的話其實很少會用到這個方案來做長連接，它要求用戶必須安裝了Flash插件。如果是HTML網(wǎng)頁端的話，其實更多會選擇WebSocket這種方案，WebSocket的優(yōu)點非常明顯，建立一次握手以后，服務(wù)端和網(wǎng)頁端就可以雙向通信了，擺脫了HTTP的Request-Response的限制，消息的及時性和效率都大幅度的提升了。
但是WebSocket也不是那么簡單，其中的坑也非常的多，如何單個生產(chǎn)者推送給多個消費者，如何保證不重復(fù)推送，斷線以后的重連等等。當(dāng)然更重要的是，不同的瀏覽器對于WebSocket的支持可能不同，兼容性也是一大問題，所以使用得并不是很多。
那有沒有一種更常用的方法來處理消息的接收呢？
想要建立一條HTTP長輪詢的通道，我們需要在瀏覽器和服務(wù)器之間建立一條通知連接。
而這條通知連接不同于普通的HTTP連接，它要有一些特殊性：
怎么來Hold住這個請求呢？
個人認(rèn)為，長輪詢的請求就一直保持對消息隊列的數(shù)據(jù)拉取就行，如果有實時的消息來了，也等到它進(jìn)入消息隊列以后再處理，這樣可以防止消息丟失，也可以降低系統(tǒng)的復(fù)雜度。
總的來說，網(wǎng)頁端的消息接收，用什么方式好呢？拉和推都可以，每種方式有每種方式的優(yōu)缺點。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
