为上篇文章被头条检测为广告嫌疑，可能是有其他网站的地址和下载链接。头条系统已经不再给我推荐，所以本次再写一次，这次不打广告，也不放链接了。

大家看看华为商城的客服系统，有没有想过到底是如何制作出来的。你和客服MM的一问一答到底是如何实现的？学过ajax的朋友肯定知道，可以使用轮询方式，隔一秒到服务器里面去查询是否有聊天信息的到来，如果有，就取出来。这样肯定是可以的。但是这样做服务器压力实在太大。如果有很多人在聊天呢？服务器可能受不了，所以，我们今天来使用WebSocket技术。该技术的特别之处在于，与HTTP协议最大的不同是，HTTP协议需要请求一次，响应一次。而WebSocket使用的是协议是，一次握手，时时通讯。意思就是，第一次采用http协议握手完成之后，后面的链接就一直会保持，服务器也可以向客户端发送信息。而不再是单向的通讯方式了。

当然，制作这个客服聊天系统确实不容易，但是如果我们只想做个简单的网页聊天那还是没有问题的。

接下来，我给大家贴出一些关键代码，给大家演示如何开发出一个网页聊天系统。

必备技能：

html，css，javaScript，java，javaWeb，tomcat服务器，数据库mysql。

1 首页，必须写一个登陆页面，如果没有登录功能，那么网页对方就不知道你的身份了。大部分情况都是需要登录的。当然如果不登录，也是可以的，系统可以给你指定一个称呼，目前大多数客服系统都是 有登录的。

登录使用的是jquery的ajax向servlet发送请求，servlet调用数据库dao查询是否存在账号。这个步骤如果不会的话，那需要将javaScript和javaWeb学习一遍。

2 写一个聊天的界面，这个界面代码较多，但是大家可以去各种素材网站找模板，不用自己写的，copy就行了。

后台，我们采用的是java代码。这里因为是入门，我们没有采用spring框架，而是采用了最基本的webSocket包。这两个包可以在tomcat文件夹下面的lib文件夹找到。

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

数据库使用了两个表：

主要使用的是@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聊天模板实例

、目录介绍

• 前置知识点
• NIO
• 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 用于监听多个通道的事件（连接打开，数据到达等）。因此，单个线程可以监听多个数据通道，如下图所示：

三、Netty 的核心组件

1、Channel

Channel 是一个通道，用于连接字节缓冲区 Buffer 和另一端的实体。在 NIO 网络编程模型中，服务端和客户端进行 I/O 数据交互（得到彼此推送的信息）的媒介就是 Channel。

Netty 对 JDK 原生的 ServerSocketChannel 进行了封装和增强。

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

• id 标识唯一身份信息
• 可能存在的 parent Channel
• 管道 pepiline
• 用于数据读写的 unsafe 内部类
• 事件循环执行器 NioEventLoop

Channel可以分成两类:

• 服务端: NioServerSocketChannel
• 客户端: NioSocketChannel

具体依赖关系如下图所示：

服务端: NioServerSocketChannel

客户端: 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

连接上我们的服务，如下图所示：

如果出现 OPENED => 127.0.0.1:8080 的提示，则表示连接成功。否则请排查是否程序和示例代码一致。

然后我们点击开始发送按钮，如果出现以下提示则表示，消息发送成功啦。

好了到这里，我们的 Hello World 已经完成了。