著vue3.x越來(lái)越穩(wěn)定及vite2.0的快速迭代推出，加上很多大廠相繼推出了vue3的UI組件庫(kù)，在2021年必然受到開(kāi)發(fā)者的再一次熱捧。

Vue3迭代更新頻繁，目前star高達(dá)20.2K+。

// 官網(wǎng)地址
https://v3.vuejs.org/

Vitejs目前的star達(dá)到15.7K+。

// 官網(wǎng)地址
https://vitejs.dev/

項(xiàng)目介紹

vue3-webchat 基于vue3.x+vuex4+vue-router4+element-plus+v3layer+v3scroll等技術(shù)架構(gòu)的仿微信PC端界面聊天實(shí)例。

以上是仿制微信界面聊天效果，同樣也支持QQ皮膚。

技術(shù)棧

• 使用技術(shù)：vue3.0+vuex4+vue-router4
• UI組件庫(kù)：element-plus（餓了么Vue3 pc端組件庫(kù)）
• 彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
• 滾動(dòng)條組件：V3Scroll（基于Vue3自定義虛擬美化滾動(dòng)條）
• iconfont圖標(biāo)：阿里字體圖標(biāo)庫(kù)

Vue3.x自定義彈窗組件

大家看到的所有彈窗功能，均是自己開(kāi)發(fā)的vue3.0自定義彈窗V3Layer組件。

前段時(shí)間有過(guò)一篇詳細(xì)的分享，這里就不作介紹了。感興趣的話可以去看看。

vue3.0系列：Vue3自定義PC端彈窗組件V3Layer

Vue3.x自定義美化滾動(dòng)條組件

為了使得項(xiàng)目效果一致，所有頁(yè)面的滾動(dòng)條均是采用vue3.0自定義組件實(shí)現(xiàn)。

v3scroll 一款輕量級(jí)的pc桌面端模擬滾動(dòng)條組件。支持是否原生滾動(dòng)條、自動(dòng)隱藏、滾動(dòng)條大小/層疊/顏色等功能。

大家感興趣的話，可以去看看這篇分享。

Vue3.0系列：vue3定制美化滾動(dòng)條組件v3scroll

vue.config.js項(xiàng)目配置

/**
 * Vue3.0項(xiàng)目配置
 */

const path = require('path')

module.exports = {
    // 基本路徑
    // publicPath: '/',

    // 輸出文件目錄
    // outputDir: 'dist',

    // assetsDir: '',

    // 環(huán)境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開(kāi)啟https
        https: false,
        // 編譯完是否打開(kāi)網(wǎng)頁(yè)
        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'))
    }
}

Vue3引入/注冊(cè)公共組件

// 引入餓了么ElementPlus組件庫(kù)
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

// 引入vue3彈窗組件v3layer
import V3Layer from '../components/v3layer'

// 引入vue3滾動(dòng)條組件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)

    // 注冊(cè)公共組件
    app.component('WinBar', WinBar)
    app.component('SideBar', SideBar)
    app.component('Middle', Middle)

    app.provide('utils', Utils)
}

export default Plugins

項(xiàng)目中主面板毛玻璃效果(虛化背景)

<!-- //虛化背景（毛玻璃） -->
<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攔截登錄狀態(tài)

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()
    }
})

Vue3.x聊天模塊

如上圖：聊天編輯框部分支持文字+emoj表情、在光標(biāo)處插入表情、多行文本內(nèi)容。

編輯器抽離了一個(gè)公共的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ā)送，通過(guò)監(jiān)聽(tīng)paste事件，判斷是否是圖片類(lèi)型，從而發(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: '暫時(shí)支持拖拽一張圖片', 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開(kāi)發(fā)仿微信/QQ聊天實(shí)戰(zhàn)項(xiàng)目就分享到這里。

基于vue3.0+vant3移動(dòng)端聊天實(shí)戰(zhàn)|vue3聊天模板實(shí)例

為上篇文章被頭條檢測(cè)為廣告嫌疑，可能是有其他網(wǎng)站的地址和下載鏈接。頭條系統(tǒng)已經(jīng)不再給我推薦，所以本次再寫(xiě)一次，這次不打廣告，也不放鏈接了。

大家看看華為商城的客服系統(tǒng)，有沒(méi)有想過(guò)到底是如何制作出來(lái)的。你和客服MM的一問(wèn)一答到底是如何實(shí)現(xiàn)的？學(xué)過(guò)ajax的朋友肯定知道，可以使用輪詢方式，隔一秒到服務(wù)器里面去查詢是否有聊天信息的到來(lái)，如果有，就取出來(lái)。這樣肯定是可以的。但是這樣做服務(wù)器壓力實(shí)在太大。如果有很多人在聊天呢？服務(wù)器可能受不了，所以，我們今天來(lái)使用WebSocket技術(shù)。該技術(shù)的特別之處在于，與HTTP協(xié)議最大的不同是，HTTP協(xié)議需要請(qǐng)求一次，響應(yīng)一次。而WebSocket使用的是協(xié)議是，一次握手，時(shí)時(shí)通訊。意思就是，第一次采用http協(xié)議握手完成之后，后面的鏈接就一直會(huì)保持，服務(wù)器也可以向客戶端發(fā)送信息。而不再是單向的通訊方式了。

當(dāng)然，制作這個(gè)客服聊天系統(tǒng)確實(shí)不容易，但是如果我們只想做個(gè)簡(jiǎn)單的網(wǎng)頁(yè)聊天那還是沒(méi)有問(wèn)題的。

接下來(lái)，我給大家貼出一些關(guān)鍵代碼，給大家演示如何開(kāi)發(fā)出一個(gè)網(wǎng)頁(yè)聊天系統(tǒng)。

必備技能：

html，css，javaScript，java，javaWeb，tomcat服務(wù)器，數(shù)據(jù)庫(kù)mysql。

1 首頁(yè)，必須寫(xiě)一個(gè)登陸頁(yè)面，如果沒(méi)有登錄功能，那么網(wǎng)頁(yè)對(duì)方就不知道你的身份了。大部分情況都是需要登錄的。當(dāng)然如果不登錄，也是可以的，系統(tǒng)可以給你指定一個(gè)稱呼，目前大多數(shù)客服系統(tǒng)都是 有登錄的。

登錄使用的是jquery的ajax向servlet發(fā)送請(qǐng)求，servlet調(diào)用數(shù)據(jù)庫(kù)dao查詢是否存在賬號(hào)。這個(gè)步驟如果不會(huì)的話，那需要將javaScript和javaWeb學(xué)習(xí)一遍。

2 寫(xiě)一個(gè)聊天的界面，這個(gè)界面代碼較多，但是大家可以去各種素材網(wǎng)站找模板，不用自己寫(xiě)的，copy就行了。

后臺(tái)，我們采用的是java代碼。這里因?yàn)槭侨腴T(mén)，我們沒(méi)有采用spring框架，而是采用了最基本的webSocket包。這兩個(gè)包可以在tomcat文件夾下面的lib文件夾找到。

前后臺(tái)通訊方式采用的是json方式。所以引入了Gson包。

數(shù)據(jù)庫(kù)使用了兩個(gè)表：

主要使用的是@ServerEndpoint注解，以及@OnOpen@OnMessage注解。

@ServerEndpoint注解表示ws的路徑。

@OnOpen表示連接時(shí)觸發(fā)該方法

@OnMessage 表示服務(wù)器收到消息時(shí)觸發(fā)

發(fā)送圖片文件采用的方式還是http方式。

將發(fā)送人和接收人和文件使用FormData封裝起來(lái)，然后使用ajax保存到服務(wù)器中。然后再將服務(wù)器保存的地址發(fā)給對(duì)方。

聊天系統(tǒng)沒(méi)有加密。只是簡(jiǎn)單的制作。有興趣的可以私聊我，可以發(fā)源代碼給你，因?yàn)槠脚_(tái)限制，不能在文章發(fā)鏈接，見(jiàn)諒了。

頁(yè)收發(fā)消息是一個(gè)常見(jiàn)的系統(tǒng)應(yīng)用場(chǎng)景，通常我們有兩種方式來(lái)完成消息的發(fā)送，一種是通過(guò)客戶端來(lái)拉取消息，一種是服務(wù)端推送消息，到底使用哪種方式好一點(diǎn)呢？

具體使用哪種方式，我們需要根據(jù)實(shí)際的業(yè)務(wù)場(chǎng)景來(lái)分析，沒(méi)有絕對(duì)正確的方式，只有適不適合。所以，我們分析一下網(wǎng)頁(yè)端的用戶一般都存在哪些應(yīng)用場(chǎng)景：

1. 系統(tǒng)將通知發(fā)送給用戶——這種場(chǎng)景下，用戶對(duì)于消息的實(shí)時(shí)性要求并不高
2. 用戶和用戶之間發(fā)送聊天消息——這種場(chǎng)景下，用戶就對(duì)實(shí)時(shí)性的要求很高了，越實(shí)時(shí)越好

我們拋開(kāi)純技術(shù)實(shí)現(xiàn)不談，只是從解決方案來(lái)談，由于是使用的是網(wǎng)頁(yè)端，HTTP協(xié)議是通過(guò)“請(qǐng)求-響應(yīng)”的方式傳遞，網(wǎng)頁(yè)端和服務(wù)端之間是沒(méi)有消息通道的，那么怎么來(lái)實(shí)現(xiàn)消息的接收呢？

輪詢拉取

輪詢拉取可以說(shuō)是所有消息的實(shí)現(xiàn)方案中最簡(jiǎn)單的一種，實(shí)現(xiàn)起來(lái)也非常簡(jiǎn)單。

大致的實(shí)現(xiàn)方法如下：

1. 發(fā)送方發(fā)送消息后，消息先進(jìn)入隊(duì)列中暫存（也可以是數(shù)據(jù)庫(kù)）
2. 網(wǎng)頁(yè)端建立一個(gè)timer，固定時(shí)間（例如：30秒）輪詢到隊(duì)列（或數(shù)據(jù)庫(kù)）中拉取消息
3. 無(wú)論有沒(méi)有拉到消息，收到返回的消息后，30秒后再次輪詢拉取

這種方式最大的優(yōu)勢(shì)就是實(shí)現(xiàn)非常簡(jiǎn)單，而且容易理解，早期的聊天室基本都是這種實(shí)現(xiàn)方式，我曾經(jīng)給朋友做過(guò)一個(gè)答題的系統(tǒng)，有多個(gè)終端，每個(gè)終端看到的內(nèi)容需要有所不同，也是使用的這種實(shí)現(xiàn)方式。

當(dāng)然這種實(shí)現(xiàn)方式的缺點(diǎn)也是非常明顯：

1. 時(shí)效性差：隨著timer間隔時(shí)間的長(zhǎng)短，收到消息的延時(shí)時(shí)間會(huì)被拉長(zhǎng)，以30秒為例，消息最大的延時(shí)就會(huì)達(dá)到30秒
2. 效率差：網(wǎng)頁(yè)端會(huì)不停的請(qǐng)求服務(wù)器，但是發(fā)消息的頻率事實(shí)上并沒(méi)有這么高，如果10次輪詢才拉到一條消息，那么有效性只有10%，大量的浪費(fèi)了服務(wù)器資源

使用這種方式，時(shí)效性和效率是矛盾的，我降低timer的間隔時(shí)間，就可以提高時(shí)效性，但是會(huì)降低效率，例如：間隔時(shí)間降低到1秒，這種基本就可以趨近于實(shí)時(shí)了，但是可能300次輪詢才會(huì)拉到1條消息，有效性只有0.3%了。

所以，由于這個(gè)不可調(diào)和的矛盾存在，這種解決方案只能適用于一些同時(shí)在線用戶少，對(duì)實(shí)時(shí)性要求不高的場(chǎng)景中。

長(zhǎng)連接

如果想要同時(shí)保證時(shí)效性和效率，其實(shí)長(zhǎng)連接是一個(gè)不錯(cuò)的選擇，一般我們的PC端聊天軟件都是使用的長(zhǎng)連接方式來(lái)實(shí)現(xiàn)。而網(wǎng)頁(yè)端的長(zhǎng)連接實(shí)現(xiàn)方式通常有兩種：

1. WebSocket
2. FlashSocket

FlashSocket就不說(shuō)了，如果不是網(wǎng)頁(yè)游戲的話其實(shí)很少會(huì)用到這個(gè)方案來(lái)做長(zhǎng)連接，它要求用戶必須安裝了Flash插件。如果是HTML網(wǎng)頁(yè)端的話，其實(shí)更多會(huì)選擇WebSocket這種方案，WebSocket的優(yōu)點(diǎn)非常明顯，建立一次握手以后，服務(wù)端和網(wǎng)頁(yè)端就可以雙向通信了，擺脫了HTTP的Request-Response的限制，消息的及時(shí)性和效率都大幅度的提升了。

但是WebSocket也不是那么簡(jiǎn)單，其中的坑也非常的多，如何單個(gè)生產(chǎn)者推送給多個(gè)消費(fèi)者，如何保證不重復(fù)推送，斷線以后的重連等等。當(dāng)然更重要的是，不同的瀏覽器對(duì)于WebSocket的支持可能不同，兼容性也是一大問(wèn)題，所以使用得并不是很多。

那有沒(méi)有一種更常用的方法來(lái)處理消息的接收呢？

HTTP長(zhǎng)輪詢

想要建立一條HTTP長(zhǎng)輪詢的通道，我們需要在瀏覽器和服務(wù)器之間建立一條通知連接。

而這條通知連接不同于普通的HTTP連接，它要有一些特殊性：

1. 這個(gè)HTTP連接只能用來(lái)收取推送的消息
2. 不同于普通的Request-Response HTTP請(qǐng)求，這個(gè)HTTP連接不會(huì)馬上響應(yīng)，會(huì)先被Hold在這里，知道接到通知的消息或者超過(guò)了約定的時(shí)間（我們都知道，HTTP請(qǐng)求是會(huì)有超時(shí)的，一般我們都會(huì)設(shè)置一個(gè)請(qǐng)求超時(shí)的閾值，如果超過(guò)這個(gè)閾值，那么請(qǐng)求就會(huì)被粗暴的斷開(kāi)，返回一個(gè)錯(cuò)誤消息，為了保證我們的請(qǐng)求不被粗暴的對(duì)待，我們需要在超時(shí)之前優(yōu)雅的返回一個(gè)結(jié)果）

怎么來(lái)Hold住這個(gè)請(qǐng)求呢？

場(chǎng)景一：隊(duì)列里面有消息

1. 發(fā)起一個(gè)通知連接HTTP請(qǐng)求
2. 發(fā)現(xiàn)消息隊(duì)列里面有消息，于是拿到消息然后立刻返回
3. 收到返回的消息后，立刻再次發(fā)起通知連接的請(qǐng)求

場(chǎng)景二：隊(duì)列里面沒(méi)有消息

1. 發(fā)起一個(gè)通知連接HTTP請(qǐng)求
2. 發(fā)現(xiàn)消息隊(duì)列里面沒(méi)有消息，于是一直等待直到達(dá)到時(shí)間閾值然后返回
3. 收到返回的消息后，立刻再次發(fā)起通知連接的請(qǐng)求

個(gè)人認(rèn)為，長(zhǎng)輪詢的請(qǐng)求就一直保持對(duì)消息隊(duì)列的數(shù)據(jù)拉取就行，如果有實(shí)時(shí)的消息來(lái)了，也等到它進(jìn)入消息隊(duì)列以后再處理，這樣可以防止消息丟失，也可以降低系統(tǒng)的復(fù)雜度。

總的來(lái)說(shuō)，網(wǎng)頁(yè)端的消息接收，用什么方式好呢？拉和推都可以，每種方式有每種方式的優(yōu)缺點(diǎn)。

1. 如果業(yè)務(wù)不復(fù)雜，實(shí)時(shí)性不高，建議輪詢拉取
2. 最佳方案是推，但是WebSocket和FlashSocket各有局限性，實(shí)現(xiàn)起來(lái)也麻煩一點(diǎn)
3. 常見(jiàn)方式就是長(zhǎng)輪詢，需要開(kāi)辟一條專(zhuān)用的消息通道