Socket.io聊天应用图片广播发送功能无法正常运行

已定位的前端硬伤 #

• 元素属性调用错误：代码中写的document.getElementById('upload-btn').getContext('2d')，目标是类型为file的input元素，这类元素不存在Canvas上下文方法，运行到这行直接抛出未捕获错误，会直接中断后续所有JS逻辑执行，包括Socket事件绑定，是导致图片收不到、不展示的核心原因。
• 图片渲染逻辑错位：收到图片消息后，创建了空的<li>节点直接插入消息列表，但是新建的Image对象没有插入到这个li节点内部，反而调用不存在的Canvas上下文绘制，就算不报错用户也看不到图片。
• 上传交互逻辑缺失：两个提交按钮共用同一个表单，没有绑定文件选择后的处理逻辑，选中图片后点击提交只会走文本输入框的发送判断，图片内容从未通过Socket发送出去。
• MIME类型写死错误：后端发送的是jpg格式的图片流，前端硬编码data URI为image/png，会导致图片解析失败无法渲染。

已定位的后端硬伤 #

• 文件路径不匹配：静态文件服务配置的是public目录为静态资源根路径，但fs读取文件的路径是项目根目录下的/images/image.jpg，如果实际图片存储在public目录下的images文件夹，会直接抛出文件找不到的错误，无法生成图片buffer发送。
• 逻辑分散冗余：同一个连接事件被拆成4个独立的io.on('connection')块绑定，逻辑分散容易引发引用错误；当前的图片发送逻辑是用户一连接就自动推送固定的本地图片，完全没有匹配“用户主动发送选中图片”的交互流程。
• 广播逻辑缺失：当前的图片事件只发送给建立连接的单个socket，其他在线用户无法收到图片消息，和文本消息的全局广播逻辑不统一。
• 文件读取无异常捕获：fs.readFile的回调中没有对err参数做判断，一旦图片路径错误会直接触发未捕获异常，导致服务进程崩溃。

修复步骤 #

• 前端调整：
  • 删除所有和错误Canvas上下文相关的代码，不需要借助Canvas渲染图片，直接将创建的img节点插入到消息列表的li元素内部
  • 给文件选择input绑定change事件，选中图片后通过FileReader将图片转成base64格式，通过自定义image message事件发送到服务端
  • 动态匹配图片的MIME类型，和后端存储的图片格式保持一致
  • 优化表单提交判断逻辑：如果当前选中了待发送的图片文件，就走图片发送流程，否则走文本消息发送流程，避免重复触发提交
• 后端调整：
  • 把分散的connection监听合并为单个代码块，减少逻辑分散带来的引用错误
  • 新增image message事件监听，收到前端发送的base64图片后，通过io.emit('image message', 图片内容)广播给所有在线用户
  • 修正fs读取的图片存储路径，和静态文件目录保持一致，在回调中加入错误判断，路径异常时仅打印日志不触发进程崩溃
  • 删除用户刚连接就自动推送固定图片的逻辑，匹配真实聊天场景的交互逻辑

内容的提问来源于stack exchange，提问作者Penguin