react18-webchat網頁聊天實例|React Hooks+Arco Design仿微信桌面端

来源:https://www.cnblogs.com/xiaoyan2017/archive/2023/09/12/17695193.html
-Advertisement-
Play Games

React18 Hooks+Arco-Design+Zustand仿微信客戶端聊天ReactWebchat。 react18-webchat基於react18+vite4.x+arco-design+zustand等技術開發的一款仿製微信網頁版聊天實戰項目。實現發送帶有emoj消息文本、圖片/視頻預 ...


React18 Hooks+Arco-Design+Zustand仿微信客戶端聊天ReactWebchat

react18-webchat基於react18+vite4.x+arco-design+zustand等技術開發的一款仿製微信網頁版聊天實戰項目。實現發送帶有emoj消息文本、圖片/視頻預覽、紅包/朋友圈、局部模塊化刷新/美化滾動條等功能。

使用技術

  • 編輯器: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自定義桌面端彈窗組件)
  • 預處理樣式:sass^1.66.1

項目目錄結構

使用vite4.x創建react18項目,目錄線性結構如下。

react-webchat 項目全部採用react18 hooks規範編碼開發,使用到的對話框及虛擬滾動條均是自研組件實現功能效果。

react18 hooks自定義對話框+美化滾動條

大家看到的彈窗及滾動條組件都是自定義組件實現功能場景。

// 引入對話框組件
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}
    ]
})

react-scrollbar美化系統滾動條調用非常簡單,需要包裹需要滾動的內容塊即可快速生成一個虛擬滾動條。

// 引入滾動條組件
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

react18-router-dom配置

自定義路由占位模板,有點類似vue裡面的router-view占位。

// 路由占位模板(類似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>
    )
}

路由配置文件

/**
 * react-router路由配置 by HS 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

react新狀態管理器Zustand

這次開發react項目沒有使用redux作為狀態管理,而是使用支持react18 hooks新一代狀態管理庫Zustand。

// NPM
npm install zustand

// Yarn
yarn add zustand

zustand提供了內置的persist本地持久化存儲管理。

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

react18-chat聊天模塊

聊天區域支持拖拽發送圖片、編輯框支持多行文本、游標處插入emoj表情符。

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

獲取輸入游標位置

// 獲取游標最後位置
const getLastCursor = () => {
    let sel = window.getSelection()
    if(sel && sel.rangeCount > 0) {
        return sel.getRangeAt(0)
    }
}

游標處插入內容

// 游標處插入emoj表情符內容
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()
}

okay,基於react18 hooks+arco開髮網頁聊天項目就分享到這裡,希望對大家有些幫助哈~

最後附上兩個最新uniapp/tauri跨端實例項目

https://www.cnblogs.com/xiaoyan2017/p/17507581.html

https://www.cnblogs.com/xiaoyan2017/p/17552562.html

 

本文為博主原創文章,未經博主允許不得轉載,歡迎大家一起交流 QQ(282310962) wx(xy190310)
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1、表名:應體現具體業務含義,全部小寫,多個單詞下劃線分割。 2、欄位:欄位名應體現具體業務含義,全部小寫、多個單詞下劃線分割,選擇合適的數據類型,並且加註釋 每個表應具有以下公共欄位: 欄位名 欄位類型 欄位說明 id int(11)/bigint(20) 自增主鍵id create_user_i ...
  • 在第14屆中國資料庫技術大會(DTCC2023)上,華為雲資料庫運維研發總監李東詳細解讀了GaussDB運維繫統自動駕駛探索和實踐。 ...
  • SQL文件鏈接在最下麵 MySQL子查詢相關使用 子查詢的實質:一個 select 語句的查詢結果能夠作為另一個語句的輸入值。子查詢不僅可用於 where 子句中,還能夠用於 from 子句中,此時子查詢的結果將作為一個臨時表(temporary table)來使用。 一、 單行子查詢 1、 查詢“ ...
  • 引言 Apple MDM (Mobile Device Management) 字面理解就是一種管理移動設備的方式,覆蓋 iOS 5 及更高版本的 iPhone/iPod touch/iPad、Mac OS X 10.7 及更高版本的 Mac、TVOS 9 及更高版本的 Apple TV,標題中的 ...
  • Vue2安裝JSX支持 有時候,我們使用渲染函數(render function)來抽象組件,而渲染函數使用Vue的h函數來編寫Dom元素相對template語法差別較大,體驗不佳,這個時候就派 JSX 上場了。然而在Vue3中預設是帶了JSX支持的,而在 Vue2 中使用 JSX,需要安裝並使用 ...
  • 作為一名全棧工程師,在日常的工作中,可能更側重於後端開發,如:C#,Java,SQL ,Python等,對前端的知識則不太精通。在一些比較完善的公司或者項目中,一般會搭配前端工程師,UI工程師等,來彌補後端開發的一些前端經驗技能上的不足。但並非所有的項目都會有專職前端工程師,在一些小型項目或者初創公... ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 如何避免寫出屎山,優雅的封裝組件,在面試官面前大大加分,從這篇文章開始! 保持單向數據流 大家都知道vue是單項數據流的,子組件不能直接修改父組件傳過來的props,但是在我們封裝組件使用v-model時,不小心就會打破單行數據流的規則, ...
  • 存儲相關 Vuex 和本地存儲(如localStorage)以及 cookie 存儲(如 document.cookie)之間有一些關係,但它們是不同的概念,用於不同的目的。 Vuex: Vuex 是 Vue.js 的官方狀態管理庫,用於在 Vue.js 應用程式中管理應用程式的全局狀態。 Vuex ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...