svelte3.x-webchat 仿微信PC版聊天实例|svelte.js聊天实战项目

svelte-webchat 基于svelte.js+svelteKit+scss+svelte-layer等技术开发的网页版聊天实例。

支持发送消息+emoj表情、图片/视频查看、链接预览、粘贴截图发送图片、红包/朋友圈、全屏/主题换肤等功能。

使用技术

  • 框架技术:svelte^3.46.5+svelteKit
  • 状态管理:svelte/store
  • 下拉刷新:mescroll.js
  • iconfont图标:阿里巴巴字体图标库
  • 自定义滚动条:svelte-scrollbar
  • 自定义弹窗:svelte-layer
  • sass/less预处理:sass^1.50.1+svelte-preprocess

目录结构

svelte.js公共模板

基于svelte-kit构建的项目,提供了layout.svelte公共模板及error.svelte错误页。

<div class="sv__container flexbox flex-alignc flex-justifyc" style="--themeSkin: {$skin}">
    <div class="sv__wrapper" class:maximize={$isWinMaximize}>
        {#if $userinfo}
        <div class="sv__board flexbox flex-col">
            <!-- <div class="sv__topbar">顶部模块</div> -->
            <div class="sv__mainwrap flex1 flexbox">
                <!-- <div class="sv__sidebar">侧边栏</div> -->
                <Middle />
                <div class="sv__mainbx flex1 flexbox flex-col">
                    <Winbar />
                    <slot />
                </div>
            </div>
            <Dock />
        </div>
        {:else}
        <div class="sv__board flexbox flex-col">
            <div class="sv__mainwrap flex1 flexbox">
                <slot />
            </div>
        </div>
        {/if}
    </div>
</div>

<!-- //Svelte错误页 -->
<script context="module">
    export function load({ error, status }) {
        return {
            props: { error, status }
        }
    }
</script>

<script>
    import { goto } from '$app/navigation'
    export let status
    export let error

    function goBack() {
        // history.go(-1)
        goto('/')
    }
</script>

<svelte:head>
    <title>{status} Error!</title>
</svelte:head>

<div class="sv__scrollview flex1">
    <div class="sv__page-error flexbox flex-col flex-alignc flex-justifyc">
        <div class="sv__page-error-img">
            <img src="404.png" alt="" />
        </div>
        <div class="sv__page-error-content">
            <div class="c-red fs-18">| {status} |┛  Page Error~~</div>
            <div class="c-999 mt-10">{error.message}</div>
            <div class="sv__btn sv__btn-default" style="color:#40b3ff;height:32px;width:120px;" on:click={goBack}><i class="iconfont icon-arrL"></i> 返回首页</div>
        </div>
    </div>
</div>

svelte.js自定义组件

项目中随处可见的弹窗及滚动条均是svelte.js自定义组件实现功能。

svelte-layer基于svelte.js网页版弹窗组件


svelte-scrollbar基于svelte.js自定义美化滚动条组件

svelte登录拦截及表单验证

<script>
    import { onMount } from 'svelte'
    import { goto } from '$app/navigation'
    import Layer, { svLayer } from '$lib/Layer'
    import { userinfo } from '@/store'
    import util from '@/utils'

    let formObj = {}
    let vcodeText = '获取验证码'
    let disabled = false
    let time = 0

    let agree = false
    let vcodeLG = true

    let telEl
    onMount(() => {
        userinfo.useStorage()
        telEl.focus()
    })

    function Message(content) {
        svLayer.message({content, icon: 'warning', time: 0, xclose: true, shade: true})
    }

    // 60s倒计时
    function getVcode() {
        let { tel } = formObj
        if(!tel) {
            Message('手机号不能为空')
        }else if(!util.checkTel(tel)) {
            Message('手机号不正确')
        }else {
            time = 60
            disabled = true
            countDown()
        }
    }
    function countDown() {
        if(time > 0) {
            vcodeText = '获取验证码('+ time +')'
            time--
            setTimeout(countDown, 1000)
        }else {
            vcodeText = '获取验证码'
            time = 0
            disabled = false
        }
    }

    function handleSubmit() {
        console.log('——+——+——表单数据:', formObj)

        let { tel, vcode, pwd } = formObj
        if(!tel) {
            Message('手机号不能为空')
        }else if(!util.checkTel(tel)) {
            Message('手机号不正确')
        }else if(vcodeLG && !vcode) {
            Message('验证码不能为空')
        }else if(!vcodeLG && !pwd) {
            Message('密码不能为空')
        }else {
            svLayer({
                type: 'toast',
                icon: 'success',
                content: '登录成功',
                shadeClose: false,
                time: 2,
                onClose: () => {
                    userinfo.set({
                        user: tel,
                        token: util.setToken()
                    })
                    goto('/')
                }
            })
        }
    }
</script>

svelte.js粘贴截图/拖拽上传


如上图:聊天编辑框支持粘贴截图发送,拖拽上传功能。

editorEl.addEventListener('paste', function(e) {
    e.preventDefault()

    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 imgpath = this.result

                // 返回图片给父组件
                dispatch('paste', imgpath)
            }
        }
    }
})

监听drop拖拽事件。

/**
 * svelte拖拽上传图片
 * author:andy Q:282310962
 */
function handleDragEnter(e) {
    e.stopPropagation()
    e.preventDefault()
}
function handleDragOver(e) {
    e.stopPropagation()
    e.preventDefault()
}
function handleDrop(e) {
    e.stopPropagation()
    e.preventDefault()

    handleFileList(e.dataTransfer)
}
// 拖拽文件列表
function handleFileList(filelist) {
    let files = filelist.files
    if(files.length >= 2) {
        svLayer.message({content: '暂时支持拖拽一张图片', icon: 'error', time: 0, xclose: true, shade: true})
        return false
    }
    for(let i = 0; i < files.length; i++) {
        if(files[i].type != '') {
            handleFileAdd(files[i])
        }else {
            svLayer.message({content: '目前不支持文件夹拖拽功能', icon: 'error', time: 0, xclose: true, shade: true})
        }
    }
}
function handleFileAdd(file) {
    let len = msgList.length
    // 消息队列
    let msgArr = {
        id: `msg_${++len}`,
        msgtype: 5,
        isme: true,
        avatar: '/uimg/img-avatar08.jpg',
        author: 'Hison',
        msg: '',
        imgsrc: '',
        videosrc: ''
    }

    if(file.type.indexOf('image') == -1) {
        svLayer.message({content: '目前不支持非图片拖拽功能', icon: 'error', time: 0, xclose: true, shade: true})
    }else {
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = async function() {
            let img = this.result

            msgArr.imgsrc = img
            msgList = msgList.concat(msgArr)

            await tick()
            scrollBottom()
        }
    }
}

好了,以上就是svelte.js开发网页聊天实例的一些分享。
uniapp+uview仿抖音app实例

[svelte-webchat](https://www.cnblogs.com/xiaoyan2017/p/16272097.html "svelte-webchat")

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
30
粉丝
37
喜欢
90
收藏
48
排名:389
访问:2.1 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
1
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1
uniapp后台
1
uni-app+uview后台系统
1
svelte.js实战开发
1
svelte3仿微信
1
svelte+svelteKit聊天室
1
svelte聊天实例
2
svelte朋友圈
1
svelte.js仿微信
1
svelte.js网页聊天
1