svelte-webchat: based on Svelte3+SvelteKit imitation WeChat Mac web interface chat instance

Overview

Svelte-Webchat is an imitation of the WeChat web version of the Mac interface chat project. Developed and constructed using the latest technology stack svelte3.x+svelteKit+sass+mescroll+svelte-layer and other technologies. The chic dock drags/scrolls the menu left and right.

Functional effects

✅Classic Dock scrollable menu mode Articles, support various custom custom development.

technology stack

• Editor: Vscode
• Framework technology: Svelte^3.46.5+SvelteKit
• State management: svelte/store
• Pull down to refresh: mescroll.js
• Scrollbar component: svelte-scrollbar
• Dialog component: svelte-layer
• sass preprocessing: sass^1.50.1+svelte-preprocess

svelte- webchat also has a built-in Moments module.

Project structure

Very clear hierarchical directory structure.

svelte custom component (pop-up window + scroll bar)

The ubiquitous pop-up window and scroll bar functions in the project are based on svelte.js custom components.

• svelte-layer is a web page dialog component developed based on svelte3
  https://segmentfault.com/a/1190000041721778
• svelte-scrollbar is a virtual beautification scroll bar component based on svelte.js
  https://segmentfault.com/a/1190000041814107

Since there have been related articles shared before, I will not introduce them in detail here.

svelte public layout template

svelteKit provides __layout.svelte layout template and __error.svelte error handling page.

As shown above: The overall layout is divided into left + right content area + bottom dock menu.

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

 <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 implements chat

The chat edit box supports multi-line text, insert content at the cursor, paste screenshots to send pictures + drag and drop to send pictures.

The edit box listens to the paste event

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

svelte drag and drop upload

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

OK, based on svelte.js to develop imitation WeChat web version chat example will be shared here.

Finally, attach the two latest example projects
https://segmentfault.com/a/1190000041357547
https://segmentfault.com/a/1190000040015181