react18+arco網頁聊天室|react hooks高仿微信聊天

發表於2023-09-18
React網頁Hook

一、專案介紹

react18聊天專案ReactChat 基於vite4+react18+acro design+zustand等技術架構實現開發仿微信電腦端介面聊天例項。支援圖文混排、圖片/影片預覽、紅包/朋友圈等功能。

二、編碼技術

  • 編輯器：vscode
  • 技術棧：react18+vite4+react-router-dom+zustand+sass
  • 元件庫：@arco-design/web-react (位元組跳動react元件庫)
  • 狀態管理：zustand^4.4.1
  • 路由管理：react-router-dom^6.15.0
  • className拼合：clsx^2.0.0
  • 對話方塊元件：rdialog (基於react18 hooks自定義桌面端彈窗元件)
  • 捲軸元件：rscroll (基於react18 hooks自定義美化捲軸)
  • 預處理樣式：sass^1.66.1

三、專案結構目錄

整個專案採用react18 hooks規範編碼開發頁面。

react18自定義彈窗/捲軸元件

專案中應用到的對話方塊及捲軸外掛均是基於react18 hooks自定義元件實現效果。

image.png

// 引入彈窗元件
import RDialog, { rdialog } from '@/components/rdialog'

// 元件式呼叫
<RDialog
    visible={confirmVisible}
    title="標題資訊"
    content="對話方塊內容資訊"
    closeable
    shadeClose={false}
    zIndex="2050"
    dragOut
    maxmin
    btns={[
        {text: '取消', click: () => setConfirmVisible(false)},
        {text: '確定', click: handleInfo}
    ]}
    onClose={()=>setConfirmVisible(false)}
/>

// 函式式呼叫
rdialog({
    title: '標題資訊',
    content: '對話方塊內容資訊',
    closeable: true,
    shadeClose: false,
    zIndex: 2050,
    dragOut: true,
    maxmin: true,
    btns: [
        {text: '取消', click: rdialog.close()},
        {text: '確定', click: handleInfo}
    ]
})
// 引入捲軸元件
import RScroll from '@/components/rscroll'

<RScroll autohide maxHeight={100}>
    包裹需要滾動的內容塊。。。
</RScroll>

main.jsx入口檔案

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import '@arco-design/web-react/dist/css/arco.css'
import './style.scss'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

App.jsx模板

import { HashRouter } from 'react-router-dom'

// 引入useRoutes集中式路由配置檔案
import Router from './router'

function App() {
    return (
        <>
            <HashRouter>
              <Router />
            </HashRouter>
        </>
    )
}

export default App

react-router v6配置

f4f85e12a2052ae9e736b6bf8caccccd_1289798-20230912085854147-2030833762.png

// 路由佔位模板(類似vue中router-view)
const RouterLayout = () => {
    const authState = authStore()
    return (
        <div className="rc__container flexbox flex-alignc flex-justifyc" style={{'--themeSkin': authState.skin}}>
            <div className="rc__layout flexbox flex-col">
                {/* <div className="rc__layout-header">頂部欄</div> */}
                <div className="rc__layout-body flex1 flexbox">
                    {/* 選單欄 */}
                    <Menu />

                    {/* 中間欄 */}
                    <Aside />

                    {/* 主內容區 */}
                    <div className="rc__layout-main flex1 flexbox flex-col">
                        { lazyload(<Outlet />) }
                    </div>
                </div>
            </div>
        </div>
    )
}

完整的配置檔案

/**
 * 路由配置 by YXY Q：282310962
*/

import { lazy, Suspense } from 'react'
import { useRoutes, Outlet, Navigate } from 'react-router-dom'
import { Spin } from '@arco-design/web-react'

import { authStore } from '@/store/auth'

// 引入路由頁面
import Login from '@views/auth/login'
import Register from '@views/auth/register'
const Index = lazy(() => import('@views/index'))
const Contact = lazy(() => import('@views/contact'))
const Uinfo = lazy(() => import('@views/contact/uinfo'))
const NewFriend = lazy(() => import('@views/contact/newfriend'))
const Chat = lazy(() => import('@views/chat/chat'))
const ChatInfo = lazy(() => import('@views/chat/info'))
const RedPacket = lazy(() => import('@views/chat/redpacket'))
const Fzone = lazy(() => import('@views/my/fzone'))
const Favorite = lazy(() => import('@views/my/favorite'))
const Setting = lazy(() => import('@views/my/setting'))
const Error = lazy(() => import('@views/404'))

import Menu from '@/layouts/menu'
import Aside from '@/layouts/aside'

// 載入提示
const SpinLoading = () => {
    return (
        <div className="rcLoading">
            <Spin size="20" tip='loading...' />
        </div>
    )
}

// 延遲載入
const lazyload = children => {
    // React 16.6 新增了<Suspense>元件,讓你可以“等待”目的碼載入,並且可以直接指定一個載入的介面，讓它在使用者等待的時候顯示
    // 路由懶載入報錯：react-dom.development.js:19055 Uncaught Error: A component suspended while responding to synchronous input.
    // 懶載入的模式需要我們給他加上一層 Loading的提示載入元件
    return <Suspense fallback={<SpinLoading />}>{children}</Suspense>
}

// 路由鑑權驗證
const RouterAuth = ({ children }) => {
    const authState = authStore()

    return authState.isLogged ? (
        children
    ) : (
        <Navigate to="/login" replace={true} />
    )
}

export const routerConfig = [
    {
        path: '/',
        element: <RouterAuth><RouterLayout /></RouterAuth>,
        children: [
            // 首頁
            { index: true, element: <Index /> },

            // 通訊錄模組
            { path: '/contact', element: <Contact /> },
            { path: '/uinfo', element: <Uinfo /> },
            { path: '/newfriend', element: <NewFriend /> },

            // 聊天模組
            { path: '/chat', element: <Chat /> },
            { path: '/chatinfo', element: <ChatInfo /> },
            { path: '/redpacket', element: <RedPacket /> },

            // 我的模組
            { path: '/fzone', element: <Fzone /> },
            { path: '/favorite', element: <Favorite /> },
            { path: '/setting', element: <Setting /> },

            // 404模組 path="*"不能省略
            { path: '*', element: <Error /> }
        ]
    },
    // 登入/註冊
    { path: '/login', element: <Login /> },
    { path: '/register', element: <Register /> }
]

const Router = () => useRoutes(routerConfig)

export default Router

zustand新一代react18 hooks狀態管理庫

343b6fce96df4dc1cf6ffc93b48e84af_1289798-20230912091226349-691974103.png

支援react18 hooks風格的狀態管理庫zustand。在用法上有些類似vue3 pinia語法。

// NPM
npm install zustand

// Yarn
yarn add zustand
/**
 * react18狀態管理庫Zustand
*/
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'

export const authStore = create(
    persist(
        (set, get) => ({
            isLogged: false,
            token: null,
            // 摺疊側邊欄
            collapse: false,
            // 個性換膚
            skin: null,
            // 登入資料
            loggedData: (data) => set({isLogged: data.isLogged, token: data.token}),
            setCollapse: (v) => set({collapse: v}),
            setSkin: (v) => set({skin: v})
        }),
        {
            name: 'authState',
            // name: 'auth-store', // name of the item in the storage (must be unique)
            // storage: createJSONStorage(() => sessionStorage), // by default, 'localStorage'
        }
    )
)

4febddfc6ffe477515df81358c6ca051_1289798-20230912092340195-1919576695.png

如上圖：聊天編輯框支援多行文字、游標處插入表情等功能。

return (
    <div
        {...rest}
        ref={editorRef}
        className={clsx('editor', className)}
        contentEditable
        onClick={handleClick}
        onInput={handleInput}
        onFocus={handleFocus}
        onBlur={handleBlur}
        style={{'userSelect': 'text', 'WebkitUserSelect': 'text'}}
    />
)

在游標地方插入指定內容。

const insertHtmlAtCursor = (html) => {
    let sel, range
    if(!editorRef.current.childNodes.length) {
        editorRef.current.focus()
    }

    if(window.getSelection) {
        // IE9及其它瀏覽器
        sel = window.getSelection()

        // ##注意：判斷最後游標位置
        if(lastCursor.current) {
            sel.removeAllRanges()
            sel.addRange(lastCursor.current)
        }

        if(sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0)
            range.deleteContents()
            let el = document.createElement('div')
            el.appendChild(html)
            var frag = document.createDocumentFragment(), node, lastNode
            while ((node = el.firstChild)) {
                lastNode = frag.appendChild(node)
            }
            range.insertNode(frag)
            if(lastNode) {
                range = range.cloneRange()
                range.setStartAfter(lastNode)
                range.collapse(true)
                sel.removeAllRanges()
                sel.addRange(range)
            }
        }
    } else if(document.selection && document.selection.type != 'Control') {
        // IE < 9
        document.selection.createRange().pasteHTML(html)
    }

    // 執行輸入操作
    handleInput()
}

基於react18+zustand開發網頁聊天功能就分享到這裡，希望能喜歡！

https://segmentfault.com/a/1190000043667464
https://segmentfault.com/a/1190000043942666

相關文章