express+vue在线im实现【二】

不忘初心1995

已于 2024-06-17 19:04:25 修改

阅读量537

点赞数 6

分类专栏：在线im 文章标签： vue.js express javascript

于 2024-06-16 20:09:51 首次发布

本文链接：https://blog.csdn.net/qq_42451776/article/details/139725340

版权

在线im 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

express+vue在线im实现【一】

在线体验

本期完成了：
1、心跳检测
2、输入框支持混合发送文字，表情与图片
3、新增了一些细节，消息固定位置，是否显示呢称，新消息来的闪烁提示等
4、将整个模块独立了出来，在博客页新增了全局挂载
5、如何处理图片的加载无法正常获取到准确高度，导致无法滚动到准确位置(这个是这期本人觉得最复杂的，等待图片加载完再获取高度，体验太差；设置固定高度，又无法兼容到小图片，大的图片有看不清；具体解决方案在下方)

下期功能

1、文件发送
2、在线语音

感兴趣的，可以私聊我，也可以点个收藏，关注,以下是核心代码示例

心跳检测

为何需要做这个，长连接不稳定，会自动断开，需要我们手动来做在线检测和重连

        // 轮询心跳检测
        setHeartBeat() {
            let { room_id } = this
            clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                im_heart({ room_id })
                    .then((res) => {
                        if (res && this.isObject(res.data) && this.isObject(res.data.data)) {
                            let { status } = res.data.data
                            if (status == 2) {
                                console.log('您已掉线，开始重新加入')
                                this.socket.emit('join_room', {
                                    room_id,
                                    user_id: this.userdata._id,
                                })
                            }
                            this.setHeartBeat()
                        }
                    })
                    .catch(()=>{})
            }, this.heartTime)
        },

支持发送表情与图片

这个使用了高级css3属性来完成

    <div
                :id="myInputId"
                class="im-input kl-contenteditable-input flex-1 no-select f-14"
                contenteditable="true"
                @paste="pasteEvent($event)"
                @blur="blurEvent"
            ></div>

  async pasteEvent(event) {
            // 尝试从 event.clipboardData 获取粘贴的项
            if (event.clipboardData && event.clipboardData.items) {
                for (let index in event.clipboardData.items) {
                    const item = event.clipboardData.items[index]

                    if (item.kind === 'file') {
                        event.preventDefault()
                        // 文件类型,将数据收集为fil
                        let file = item.getAsFile()
                        try {
                            let {
                                file: miniFile,
                                newWidth,
                                newHeight,
                            } = await this.compressImg(file, 0.85)
                            const formData = new FormData()
                            formData.append('file', miniFile)
                            const  devicePixelRatioa = window.devicePixelRatio || 1

                            // 上传图片，同时需要上传图片的宽高
                            upload_imgs_im(formData, {
                                type: this.isIm ? 'im' : 'sys',
                                devicePixelRatioa,
                                width: Math.floor(newWidth / devicePixelRatioa),
                                height: Math.floor(newHeight / devicePixelRatioa),
                            }).then((res) => {
                                if (res.code != 200) {
                                    return this.$message.error(res.msg || '请重新上传')
                                }
                                // 将返回的图片链接替换到输入框中
                                let imgUrl = baseURL + this.filePath + res.data[0]?.filename
                                this.textContent = `<img src="${imgUrl}" class="contenteditable-unpload-img" />`
                                this.insertHtmlAtCaret(this.textContent)
                            })
                        } catch (err) {
                            this.$message.warning('请重新上传')
                        }
                    }
                }
            }
        },

        insertHtmlAtCaret(html, element = document.querySelector('.my-input')) {
            // 获取当前元素的选中范围
            let range, selection
            if (window.getSelection) {
                // 大多数浏览器，包括IE9+
                selection = window.getSelection()
                if (selection.rangeCount > 0) {
                    range = selection.getRangeAt(0)
                } else {
                    // 如果没有选中范围，则创建一个新的范围
                    range = document.createRange()
                    range.selectNodeContents(element)
                    range.collapse(false) // 将范围设置在元素内容的末尾
                    selection.addRange(range)
                }
            } else if (document.selection && document.selection.createRange) {
                // 旧版本的IE
                range = document.selection.createRange()
            }

            // 删除选中范围的内容（如果有的话）
            if (range) {
                range.deleteContents()
                // 创建一个临时元素来保存HTML
                const tempEl = document.createElement('div')
                tempEl.innerHTML = html

                // 将临时元素的内容复制到范围中
                while (tempEl.firstChild) {
                    range.insertNode(tempEl.firstChild)
                }
            }
        },

如何解决图片高度问题

前端部分

上传：可以看到我们在上传图片时同时上传了图片的高度与宽度

  // 上传图片，同时需要上传图片的宽高
                            upload_imgs_im(formData, {
                                type: this.isIm ? 'im' : 'sys',
                                devicePixelRatioa,
                                width: Math.floor(newWidth / devicePixelRatioa),
                                height: Math.floor(newHeight / devicePixelRatioa),
                            }).then((res) => {
                                if (res.code != 200) {
                                    return this.$message.error(res.msg || '请重新上传')
                                }
                                // 将返回的图片链接替换到输入框中
                                let imgUrl = baseURL + this.filePath + res.data[0]?.filename
                                this.textContent = `<img src="${imgUrl}" class="contenteditable-unpload-img" />`
                                this.insertHtmlAtCaret(this.textContent)
                            })
                        } catch (err) {
                            this.$message.warning('请重新上传')
                        }

回显：直接读取链接上的宽高，来计算出需要呈现的最终宽高，这样就可以不用等到图片加载完毕，就能自动滚动到准确位置

    mounted() {
        let { chatItemClassName,maxWidth } = this
        let imgs = document.querySelectorAll(`.${chatItemClassName} .contenteditable-unpload-img`)
        if (imgs && imgs.length > 0) {
            for (let i = 0; i < imgs.length; i++) {
                const item = imgs[i]
                item.onclick = () => {
                    this.prevewImg(item)
                }

                // 重新设置图片的宽高
                const src = $(item).attr('src')
                let arr = src.split('~')
                arr = arr.filter((item) => !isNaN(+item))
                if (Array.isArray(arr)) {
                    let len = arr.length
                    if (len === 3) {
                        let width = +arr[1]
                        let height = +arr[2]
                        if (isNaN(width) || isNaN(height)) return
                        if (width > maxWidth) {
                            let scale = maxWidth / width
                            width = maxWidth
                            height = height * scale
                        }
                        $(item).css({
                            width: width + 'px',
                            height: height + 'px',
                        })
                    }
                }
            }
        }
    },

express的上传代码

这边我们需要接收宽高，并将宽高信息放到文件名上

const path = require("path");
const multer = require("multer");
module.exports = (limit = 1, file_type_name = "blog") => {
  let storage = multer.diskStorage({
    destination: function (req, file, cb) {
      let { type } = req.query;
      if (type) {
        file_type_name = type;
      }
      const file_path = path.resolve(
        __dirname,
        "../../public/",
        file_type_name
      );
      cb(null, file_path);
    },
    filename: function (req, file, cb) {
      let { user_id, devicePixelRatioa = 1, width = 0, height = 0 } = req.query;
      let fileOption = {
        author_id: user_id,
        netdisk_url: "",
        netdisk_name: "",
        netdisk_save_name: "",
        netdisk_size: "",
        netdisk_create_time: "",
      };
      let fileFormat = file.originalname.split(".");
      let old_name = "";
      fileFormat.forEach((item, index) => {
        if (index < fileFormat.length - 1) {
          old_name += item;
        }
      });

      let file_type = fileFormat[fileFormat.length - 1];
      let netdisk_save_name = `${old_name}-${Date.now()}~${devicePixelRatioa}~`;
      if (width && height) {
        netdisk_save_name += `${width}~${height}~`;
      }
      netdisk_save_name += `.${file_type}`;
      // 存储相关数据到自定义项
      fileOption.netdisk_url = file_type_name + "/" + netdisk_save_name;
      fileOption.netdisk_name = file.originalname || "";
      fileOption.netdisk_save_name = netdisk_save_name || "";
      fileOption.netdisk_size = file.size || 0;
      fileOption.netdisk_create_time = Date.now();
      req.fileOption = fileOption;
      cb(null, netdisk_save_name);
    },
  });
  let upload = multer({ storage: storage });
  // file 前端上传key也必须 都是 file
  let result = upload.array("file", limit);
  return result;
};