IM 聊天组件

IM 消息通常分为文本、图片、文件等 3 类，会对应不同的展示

传入参数

自定义内容：标题(title)、内容(children)、底部(footer)

弹框组件显隐控制：

一般通过一个变量控制显示或隐藏(visible)；

并且暴露出一个事件，控制该变量(setVisible)

interface iProps {

    title?: string // 标题

    maskClose?: boolean // 点击 x 或 mask 回调

    visible?: boolean // 是否显示
setVisible: (args) => void // 设置是否显示

    children?: React.ReactNode | Array<React.ReactNode> // 自定义内容

    footer?: React.ReactNode | Array<React.ReactNode> // 自定义底部

}

基础结构

IM 聊天组件基础结构包含：头部、内容区、尾部

function wsDialog(prop: iProps) {
const wsContentRef = useRef(null); // 消息区
const { title = "消息", maskClose, visible, setVisible } = prop; // 传入参数
const [message, setMessage] = useState(""); // 当前消息
const imMessage = useSelector(
(state: rootState) => state.mediaReducer.imMessage

  ); // 消息列表 全局管理

return (
<Modal
className={styles.ws_modal}
visible={visible}
transparent
onClose={handleMaskClose}
popup
animationType="slide-up"

    >
<div className={styles.ws_modal_widget}>

        {/* 头部 */}
<div className={styles.ws_header}></div>

        {/* 内容区 */}
<div ref={wsContentRef} className={styles.ws_content}></div>

        {/* 尾部区域 */}
<div className={styles.ws_footer}></div>
</div>
</Modal>

  );

}

头部区

头部区域主要展示标题和关闭图标

标题内容可以自定义

不仅可以点击“右上角关闭图标”进行关闭

也可以通过点击“遮罩”进行关闭

// 头部关闭事件
function handleClose() {

  slLog.log("[wsDialog]点击了关闭按钮");
setVisible(false);

}

// 弹框遮罩关闭事件
function handleMaskClose() {
if (maskClose) {

    slLog.log("[wsDialog]点击了遮罩关闭");
setVisible(false);

  }

}

// 头部区域

<div className={styles.ws_header}>
<div>{title}</div>
<div className={styles.ws_header_close} onClick={handleClose}>
<Icon type="cross" color="#999" size="lg" />
</div>

</div>;

内容区

消息内容分类展示：

1. 
   
2. 文本：直接展示内容
   
3. 图片：通过 a 标签包裹展示，可以在新标签页中打开，通过target="_blank"控制
   
4. 文件：不同类型文件展示不同的图标，包括 zip、rar、doc、docx、xls、xlsx、pdf、txt 等；文件还可以进行下载
   

<div ref={wsContentRef} className={styles.ws_content}>

  {imMessage &&

    imMessage.length &&

    imMessage.map((o, index) => {
return (
<div
key={index}
className={`${styles.item} ${
o.category === "send" ? styles.self_item : ""

          }`}

        >
<div className={styles.title}>{o.showName + " " + o.showNum}</div>

          {/* 消息为图片 */}

          {o.desc === "img" ? (
<a
className={`${styles.desc} ${styles.desc_image}`}
href={o.fileUrl}
title={o.fileName}
target="_blank"

            >
<img src={o.fileUrl} />
</a>

          ) : o.desc === "file" ? (

            // 消息为文件
<div className={`${styles.desc} ${styles.desc_file}`}>
<img
className={styles.file_icon}
src={handleSuffix(o.fileSuffix)}

              />
<div className={styles.file_content}>
<a title={o.fileName}>{o.fileName}</a>
<div>{o.fileSize}</div>
</div>
<img
className={styles.down_icon}
src={downIcon}
onClick={() => handleDownload(o)}

              />
</div>

          ) : (

            // 消息为文本
<div className={`${styles.desc} ${styles.desc_message}`}>

              {o.message}
</div>

          )}
</div>

      );

    })}

</div>

文件下载通过 a 标签模拟实现

// 下载文件
function handleDownload(o) {

  slLog.log("[SLIM]下载消息文件", o.fileUrl);
const a = document.createElement("a");

  a.href = o.fileUrl;

  a.download = o.fileName;
document.body.appendChild(a);

  a.target = "_blank";

  a.click();

  a.remove();

}

监听消息内容，自动滚动到最底部处理

useEffect(() => {
if (visible && imMessage && imMessage.length) {
// 滚动到底部

    wsContentRef.current.scrollTop = wsContentRef.current.scrollHeight;

  }

}, [visible, imMessage]);

尾部区

主要是操作区，用于展示和发送文本、图片、文件等消息。

图片和文件通过原生input实现，通过accept属性控制文件类型

<div className={styles.ws_footer}>
<div className={styles.tools_panel}>

    {/* 上传图片 */}
<div className={styles.tool}>
<img src={imageIcon} />
<input type="file" accept="image/*" onChange={handleChange("img")} />
</div>

    {/* 上传文件 */}
<div className={styles.tool}>
<img src={fileIcon} />
<input
type="file"
accept=".doc,.docx,.pdf,.txt,.xls,.xlsx,.zip,.rar"
onChange={handleChange("file")}

      />
</div>
</div>
<div className={styles.input_panel}>

    {/* 输入框，上传文本 */}
<input
placeholder="输入文本"
value={message}
onChange={handleInputChange}
className={`${styles.message} ${styles.mMessage}`}
onKeyUp={handleKeyUp}

    />

    {/* 消息发送按钮 */}
<div onClick={handleMessage} className={styles.btn}>

      发送
</div>
</div>

</div>

获取图片、文件信息：

// 消息处理
function handleChange(type) {
return (ev) => {
switch (type) {
case "img":
case "file":

        msgObj.type = type === "img" ? 4 : 7;
const e = window.event || ev;
const files = e.target.files || e.dataTransfer.files;
const file = files[0];

        msgObj.content = file;
break;

    }

  };

}

实现回车键发送消息：

通过输入框，发送文本消息时，一般需要监听回车事件(onKeyUp 事件中的 event.keyCode 为 13)，也能发送消息

// 回车事件
function handleKeyUp(event) {
const value = event.target.value;
if (event.keyCode === 13) {

    slLog.log("[wsDialog]onKeyUp", value, event.keyCode);
handleInputChange(event);
handleMessage();

  }

}

组件封装

组件级别：公司级、系统级、业务级

组件封装优势：

1. 
   
2. 提升开发效率，组件化、统一化管理
   
3. 考虑发布成 npm 形式，远程发布通用
   

组件封装考虑点：

1. 
   
2. 组件的分层和分治
   
3. 设置扩展性（合理预留插槽）
   
4. 兼容性考虑（向下兼容）
   
5. 使用对象考虑
   
6. 适用范围考虑
   

组件封装步骤：

1. 
   
2. 建立组件的模板：基础架子，UI 样式，基本逻辑
   
3. 定义数据输入：分析逻辑，定义 props 里面的数据、类型
   
4. 定义数据输出：根据组件逻辑，定义要暴露出来的方法，$emit 实现等
   
5. 完成组件内部的逻辑，考虑扩展性和维护性
   
6. 编写详细的说明文档