Vue3.0桌面端聊天｜vue3仿微信/QQ網(wǎng)頁版聊天實(shí)例

著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/

項(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組件庫：element-plus（餓了么Vue3 pc端組件庫）
彈窗組件：V3Layer（基于Vue3自定義桌面端彈窗）
滾動(dòng)條組件：V3Scroll（基于Vue3自定義虛擬美化滾動(dòng)條）
iconfont圖標(biāo)：阿里字體圖標(biāo)庫

Vue3.x自定義彈窗組件

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

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

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

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

為了使得項(xiàng)目效果一致，所有頁面的滾動(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,
        // 是否開啟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'))
    }
}

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

// 引入餓了么ElementPlus組件庫
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ā)送，通過監(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: '暫時(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開發(fā)仿微信/QQ聊天實(shí)戰(zhàn)項(xiàng)目就分享到這里。

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

到聊天服務(wù)器，首先想到的都是qq，微信這樣重型的聊天工具，或者網(wǎng)易云信這樣的服務(wù)，所以自己基本沒有從零開發(fā)的欲望，但是使用node.js，發(fā)現(xiàn)原來如此簡(jiǎn)單！

首先，要對(duì)聊天這件事情進(jìn)行分解，有些事情看起來很復(fù)雜，仔細(xì)一想特別簡(jiǎn)單，什么注冊(cè)登錄，個(gè)人信息展示，添加好友，好友管理等一系列問題，都交給http的post請(qǐng)求吧，那剩下啥，就剩下兩件事情，一，發(fā)信息給服務(wù)器告訴它我要把什么信息發(fā)給誰，二，接收服務(wù)器推送過來的信息，告訴我誰給我發(fā)了什么。so。

先來個(gè)思維導(dǎo)圖：

我希望你評(píng)價(jià)這個(gè)設(shè)計(jì)太low

1，構(gòu)造一個(gè)websocket服務(wù)器，就好像收發(fā)快遞一樣，只需要實(shí)現(xiàn)取貨發(fā)到目的地即可，內(nèi)容不用管，最簡(jiǎn)代碼如下：

// 導(dǎo)入 express 模塊
const express = require('express')
// 創(chuàng)建 express 的服務(wù)器實(shí)例
const app = express()
// 使用express的 websocket模塊
var expressWs = require('express-ws');
expressWs(app);
// 在線連接對(duì)象的管理池
var pool = {};
// 注意這里id為請(qǐng)求地址里面的參數(shù)
app.ws('/ws/:id', (ws, req)=>{
    //用戶上線
    let fromId = req.params.id;
    console.log(fromId, 'go online')
    
    // 存儲(chǔ)到連接對(duì)象池中
    pool[fromId] = ws;
    // 發(fā)送歡迎消息
    send({'type':110,'to':fromId, 'from':'server', 'body':{'text':'連接成功,歡迎歡迎'}})
  
  // 監(jiān)聽 message 事件，拿到客戶端通過 websocket 發(fā)送過來的數(shù)據(jù)
    ws.on('message', (msg)=> {
      try {
        console.log(fromId, ' receive:', msg);
        let obj = JSON.parse(msg)
        obj.from = fromId;
        //正常消息處理
        handle(ws, obj); 
      } catch (error) {
        console.error(error);
        ws.send(JSON.stringify({'type':400,'to':fromId, 'from':'server', 'body':{'text':'異常:'+error}}))
      }
    })

    ws.on('close', async (e)=>{
      delete pool[fromId]
      console.log('close, ', fromId, ' up line', e)
    })
})

// 消息處理函數(shù)
function handle(ws, msgObj){
  let type = parseInt(msgObj.type)
  switch (type) {
    case 300:   //聊天信息
    case 310:   //聊天確認(rèn)收到信息
    case 320:   //聊天確認(rèn)已讀
    default:
      // 默認(rèn)，消息發(fā)給目的地，并給自己回復(fù)一個(gè)成功
      send({'type':msgObj.type, from: 'server', to: msgObj.from, body: {msg:'發(fā)送成功'}});
      send({'type':msgObj.type, from: msgObj.from, to: msgObj.to, body: msgObj.body});
      break;
  }
}

//發(fā)送消息
async function send(msgObj){
  msgObj.time = new Date().getTime();
  if(pool[msgObj.to]==undefined){
    //對(duì)方不在線
    console.log(msgObj.to,  'not online');
  }else{
    let msg = JSON.stringify(msgObj)
    pool[msgObj.to].send(msg);
  }
}


// 調(diào)用 app.listen 方法，指定端口號(hào)并啟動(dòng)web服務(wù)器
app.listen(8080, function () {
  console.log('Express server running at http://127.0.0.1')
})

如上，服務(wù)器只負(fù)責(zé)實(shí)現(xiàn)最簡(jiǎn)單的信息轉(zhuǎn)發(fā)，如同收發(fā)快遞一樣，

2，能更簡(jiǎn)單地進(jìn)行測(cè)試是一件比服務(wù)器更重要的事情。

   var websocket;
		websocket = new WebSocket("ws://127.0.0.1:8080/ws/A11");
		websocket.onmessage = function(event) {
			var data=JSON.parse(event.data);
			console.log(' 收到消息:%o', event.data);
            let type = parseInt(data.type)
            if (type==110){
              let rawObj = {"type":300,"to":"B11" ,"body":{msg:'你好呀'}}   // B11 需要再開一個(gè)網(wǎng)頁，把A11 換成B11.
                websocket.send(JSON.stringify(rawObj))
            }
    }

3，剩下的就是補(bǔ)足各種異常判斷了，另外多說一句，微服務(wù)的理念很重要，一定要拆分不相干的事情，才能讓事情足夠簡(jiǎn)單。

tml代碼如下：

<a href="tencent://message/?uin=1234567&Site=Sambow&Menu=yes">QQ在線咨詢</a>

或者是：

<a href="http://wpa.qq.com/msgrd?v=3&uin=1234567&site=qq&menu=yes">QQ咨詢</a>

其中，上述HTML代碼中的“1234567”指的是QQ客服號(hào)碼。
真機(jī)實(shí)測(cè)，不用置疑。

效果圖截圖如下：

上述兩種方式都可以實(shí)現(xiàn)，本人親測(cè)！

如果你無法實(shí)現(xiàn)QQ在線聊天，給出的病因如下：

大部分應(yīng)該是你本地瀏覽器攔截的原因(不過一般攔截，都會(huì)有彈框提示你：要打開XXXXX.exe嗎？)；
小部分是對(duì)方QQ設(shè)置了禁止臨時(shí)會(huì)話權(quán)限;
極少數(shù)人，自己的設(shè)置有問題。

只需要這么一句簡(jiǎn)單的html代碼，就可以實(shí)現(xiàn)QQ在線聊天！
具體PC端實(shí)現(xiàn)QQ聊天的原理和相關(guān)知識(shí)，可以參考”移動(dòng)web端對(duì)手機(jī)QQ的調(diào)用“進(jìn)行了解。

以上就是關(guān)于“ PC端頁面如何調(diào)用QQ進(jìn)行在線聊天？ ” 的全部?jī)?nèi)容。

原文鏈接：https://me.csdn.net/qq_35393869

在線咨詢

上一篇：在瀏覽器網(wǎng)頁中使用大語言模型 WebLLM （本地運(yùn)行）
下一篇：js 遍歷html表格獲取表格內(nèi)容

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商