網頁聊天客服是如何制作的?使用WebSocket技術!

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

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

華為客服系統

當然，制作這個客服聊天系統確實不容易，但是如果我們只想做個簡單的網頁聊天那還是沒有問題的。

接下來，我給大家貼出一些關鍵代碼，給大家演示如何開發出一個網頁聊天系統。

必備技能：

html，css，javaScript，java，javaWeb，tomcat服務器，數據庫mysql。

1 首頁，必須寫一個登陸頁面，如果沒有登錄功能，那么網頁對方就不知道你的身份了。大部分情況都是需要登錄的。當然如果不登錄，也是可以的，系統可以給你指定一個稱呼，目前大多數客服系統都是有登錄的。

登錄代碼

登錄界面

登錄使用的是jquery的ajax向servlet發送請求，servlet調用數據庫dao查詢是否存在賬號。這個步驟如果不會的話，那需要將javaScript和javaWeb學習一遍。

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

登錄后的界面

webSocket代碼

后臺，我們采用的是java代碼。這里因為是入門，我們沒有采用spring框架，而是采用了最基本的webSocket包。這兩個包可以在tomcat文件夾下面的lib文件夾找到。

使用的包

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

數據庫使用了兩個表：

非常簡單的表，mysql可以直接使用

后臺部分代碼

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

@ServerEndpoint注解表示ws的路徑。

@OnOpen表示連接時觸發該方法

@OnMessage 表示服務器收到消息時觸發

聊天時可以發送圖片和表情

發送圖片文件采用的方式還是http方式。

將發送人和接收人和文件使用FormData封裝起來，然后使用ajax保存到服務器中。然后再將服務器保存的地址發給對方。

聊天系統沒有加密。只是簡單的制作。有興趣的可以私聊我，可以發源代碼給你，因為平臺限制，不能在文章發鏈接，見諒了。

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

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

// 官網地址
https://v3.vuejs.org/

Vitejs目前的star達到15.7K+。

// 官網地址
https://vitejs.dev/

項目介紹

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

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

技術棧

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

Vue3.x自定義彈窗組件

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

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

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

Vue3.x自定義美化滾動條組件

為了使得項目效果一致，所有頁面的滾動條均是采用vue3.0自定義組件實現。

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

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

Vue3.0系列：vue3定制美化滾動條組件v3scroll

vue.config.js項目配置

/**
 * Vue3.0項目配置
 */

const path = require('path')

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

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

    // assetsDir: '',

    // 環境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否開啟https
        https: false,
        // 編譯完是否打開網頁
        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引入/注冊公共組件

// 引入餓了么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攔截登錄狀態

vue3.0中使用全局路由鉤子攔截登錄狀態。

router.beforeEach((to, from, next) => {
    const token = store.state.token

    // 判斷當前路由地址是否需要登錄權限
    if(to.meta.requireAuth) {
        if(token) {
            next()
        }else {
            // 未登錄授權
            V3Layer({
                content: '還未登錄授權！', position: 'top', layerStyle: 'background:#fa5151', time: 2,
                onEnd: () => {
                    next({ path: '/login' })
                }
            })
        }
    }else {
        next()
    }
})

Vue3.x聊天模塊

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

編輯器抽離了一個公共的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>

另外還支持粘貼截圖發送，通過監聽paste事件，判斷是否是圖片類型，從而發送截圖。

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

還支持拖拽圖片至聊天區域進行發送。

<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開發仿微信/QQ聊天實戰項目就分享到這里。

基于vue3.0+vant3移動端聊天實戰|vue3聊天模板實例

、目錄介紹

前置知識點

Netty 的核心組件

Channel
Callback
Future 和 Promise
事件和 ChannelHandler

Hello World

二、前置知識點

1、NIO

首先我們需要回顧一下，同步、異步、阻塞、非阻塞的相關概念。

同步：調用 API 后，調用者能“馬上”就知道操作的結果。
異步：相對于同步，調用 API 后，調用者不能“馬上”知道操作的結果，要等被調用方回調通知結果。
阻塞：等待全部數據讀取(寫入)完成后，才返回。
非阻塞：讀取時，讀多少返回多少；寫入時，寫入多少返回多少。不用等待，全部數據完成操作后，才返回。

NIO 是一種 同步非阻塞 的 I/O模型。

同步是指線程不斷輪詢 I/O 事件是否就緒。
非阻塞是指線程在等待 I/O 的時候，可以同時做其他任務。

同步的核心是 選擇器，選擇器代替了線程本身輪詢 I/O 事件，避免了阻塞同時減少了不必要的線程消耗；非阻塞的核心就是 通道和緩沖區，當 I/O 事件就緒時，可以通過寫到緩沖區，保證 I/O 的成功，而無需線程阻塞式地等待。

NIO主要有三大核心部分：

Channel(通道)
Buffer(緩沖區)
Selector(選擇器)

傳統 I/O 基于 字節流和字符流 進行操作，而 NIO 基于 Channel 和 Buffer 進行操作，數據總是從通道讀取到緩沖區中，或者從緩沖區寫入到通道中。Selector 用于監聽多個通道的事件（連接打開，數據到達等）。因此，單個線程可以監聽多個數據通道，如下圖所示：

NIO

三、Netty 的核心組件

1、Channel

Channel 是一個通道，用于連接字節緩沖區 Buffer 和另一端的實體。在 NIO 網絡編程模型中，服務端和客戶端進行 I/O 數據交互（得到彼此推送的信息）的媒介就是 Channel。

Netty 對 JDK 原生的 ServerSocketChannel 進行了封裝和增強。

Netty的Channel增加了如下的組件：

id 標識唯一身份信息
可能存在的 parent Channel
管道 pepiline
用于數據讀寫的 unsafe 內部類
事件循環執行器 NioEventLoop

Channel可以分成兩類:

服務端: NioServerSocketChannel
客戶端: NioSocketChannel

具體依賴關系如下圖所示：

服務端: NioServerSocketChannel

NioServerSocketChannel

客戶端: NioSocketChannel

NioSocketChannel

2、Callback

callback 就是回調，一個方法可以在適當的時候回過頭來調用這個 callback 方法。callback 是用于通知相關方某個操作已經完成最常用的方法之一。

Netty 在處理事件時內部使用了 callback。當一個 callback 被觸發，事件可以被 ChannelHandler 的接口實現處理。

一個簡單的例子如下所示：

public class ConnectHandler extends ChannelInboundHandlerAdapter {
    // 當一個新的連接建立時，channelActive 被調用
    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
           System.out.println(ctx.channel().remoteAddress());
    }
}

當一個新的連接建立后，ChannelHandler 的 callback 方法 channelActive() 會被調用，然后打印一條消息。

這個 ConnectHandler 實例（相當于被調用者）以參數的形式傳入創建 Channel 連接的函數（調用者）中，之后這個函數創建新連接后，就會回來調用這個 ConnectHandler 的 channelActive 方法，這個過程就叫回調。

3、Future 和 Promise

Future 和 Promise 起源于函數式編程，目的是將值（Future）與其計算方式（Promise）分離，從而允許更靈活地進行計算，特別是通過并行化。

Future 表示目標計算的返回值，Promise 表示計算的方式，這個模型將返回結果和計算邏輯分離，目的是為了讓計算邏輯不影響返回結果，從而抽象出一套異步編程模型。它們之間的紐帶就是 Callback。

簡單來說：Future 表示一個 異步任務的結果，針對這個結果可以添加 Callback 方法以便在任務 執行成功或失敗后做出對應的操作，而 Promise 交由任務執行者，任務執行者通過 Promise 可以標記任務完成或者失敗。

在 Netty 中：

Future 接口定義了 isSuccess()，isCancellable()，cause() 等方法，這些判斷異步執行狀態的方法都是只讀的。
Promise 接口在 extends Future 的基礎上增加了 setSuccess()，setFailure() 等方法，這些方法是可寫的，即 Promise 是可寫的 Future。

4、事件(event) 和 ChannelHandler

ChannelHandler

Netty 是一個事件驅動的框架，所有的 event(事件) 都是由 Handler 來進行處理。

ChannelHandler 可以處理 I/O、攔截 I/O 或者將 event 傳遞給 ChannelPipeline 中的下一個 Handler 進行處理。

ChannelHandler 的結構很簡單，只有三個方法，分別是：

void handlerAdded(ChannelHandlerContext ctx) throws Exception;
void handlerRemoved(ChannelHandlerContext ctx) throws Exception;
void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception;

event

Netty 用細分的 event(事件) 來通知我們狀態的變化或者操作的狀況。這讓我們可以基于發的 event 來觸發適當的行為。這類行為可能包括：

日志記錄
數據傳送
流控制
應用邏輯

event 按輸入或者輸出數據流的關系來分類。可能被輸入數據或者相關狀態改變觸發的 event 包括：

活躍或者停用的連接
讀數據
用戶 event
錯誤 event

而輸出 event 則是會觸發將來行為的操作的結果，可能會是：

打開或者關閉到遠端的連接
寫或者刷數據到一個 socket

每一個 event 都可以被分派到一個用戶實現的 handler 對象的方法。

Hello World

一個簡單的 websocket 服務端，如下所示：

Server 代碼：

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelOption;
import io.netty.channel.ChannelPipeline;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.handler.codec.http.websocketx.extensions.compression.WebSocketServerCompressionHandler;

public class Server {

    public static void main(String[] args) throws InterruptedException {
        // 用來接收客戶端傳進來的連接
        NioEventLoopGroup bossGroup = new NioEventLoopGroup();
        // 用來處理已被接收的連接
        NioEventLoopGroup workerGroup = new NioEventLoopGroup();
        // 創建 netty 服務
        ServerBootstrap serverBootstrap = new ServerBootstrap();
        try {
            serverBootstrap.group(bossGroup, workerGroup)
                    // 設置 NIO 模式
                    .channel(NioServerSocketChannel.class)
                    // 設置 tcp 緩沖區
                    .option(ChannelOption.SO_BACKLOG, 1024)
                    // 設置發送緩沖區數據大小
                    .childOption(ChannelOption.SO_SNDBUF, 64 * 1024)
                    // 設置接收緩沖區數據大小
                    .option(ChannelOption.SO_RCVBUF, 64 * 1024)
                    // 保持長連接
                    .childOption(ChannelOption.SO_KEEPALIVE, true)
                    .childHandler(new ChannelInitializer<SocketChannel>() {
                        @Override
                        public void initChannel(SocketChannel ch) throws Exception {
                            ChannelPipeline pipeline = ch.pipeline();
                            // HttpClient編解碼器
                            pipeline.addLast(new HttpServerCodec());
                            // 設置最大內容長度
                            pipeline.addLast(new HttpObjectAggregator(65536));
                            // WebSocket 數據壓縮擴展
                            pipeline.addLast(new WebSocketServerCompressionHandler());
                            // WebSocket 握手、控制幀處理
                            pipeline.addLast(new WebSocketServerProtocolHandler("/", null, true));
                            // 通道的初始化，數據傳輸過來進行攔截及執行
                            pipeline.addLast(new ServerHandler());
                        }
                    });
            // 綁定端口啟動服務
            ChannelFuture channelFuture = serverBootstrap.bind(8080).sync();
            channelFuture.channel().closeFuture().sync();
        } finally {
            workerGroup.shutdownGracefully();
            bossGroup.shutdownGracefully();
        }
    }
}

ServerHandler 代碼：

import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.ChannelInboundHandlerAdapter;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;

public class ServerHandler extends ChannelInboundHandlerAdapter {

    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        System.out.println("通道激活（回調）");
    }

    @Override
    public void channelRead(ChannelHandlerContext ctx, Object msg) throws Exception {
        // 僅處理 TextWebSocketFrame
        if (msg instanceof TextWebSocketFrame) {
            String request = ((TextWebSocketFrame) msg).text();
            System.out.println("收到請求：" + request);
            ctx.writeAndFlush(new TextWebSocketFrame("PONG"));
        }
    }

    @Override
    public void channelReadComplete(ChannelHandlerContext ctx) throws Exception {
        System.out.println("數據讀取完成");
    }
}

pom 依賴

<dependencies>
    <dependency>
        <groupId>io.netty</groupId>
        <artifactId>netty-all</artifactId>
        <version>4.1.6.Final</version>
    </dependency>
</dependencies>

然后運行 Server 即可。

接下來我們來測試一下程序是否正常，這里使用到一個在線測試網站：http://www.easyswoole.com/wstool.html

連接上我們的服務，如下圖所示：

連接websocket

如果出現 OPENED => 127.0.0.1:8080 的提示，則表示連接成功。否則請排查是否程序和示例代碼一致。

然后我們點擊開始發送按鈕，如果出現以下提示則表示，消息發送成功啦。

發送消息1

發送消息2

好了到這里，我們的 Hello World 已經完成了。

在線咨詢

上一篇：原生javascript寫個拖拽照片墻，把我的女神們都放上去
下一篇：世界杯網頁設計截圖展示

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商