如何显示图像推送器实时聊天答案

【问题标题】：how to display images pusher real time chat如何显示图像推送器实时聊天
【发布时间】：2017-07-18 19:26:43
【问题描述】：

我正在尝试使用推送器使用图像进行实时聊天我找不到有关如何使用推送器显示图像的任何信息我使用 BLOB 存储图像但无法在客户端的 javascript 中显示它们，即键入消息的人图像出现只是找到但在另一个人的屏幕上它回来未定义。我没有发布提交的javascript，因为它工作正常只是绑定不好

$avatar = 'data:image/png;base64,'. base64_encode( $image );
$pusher = PusherInstance::get_pusher() ;
$pusher->trigger(
    'channel_test',
    'new_comments',
    array('message' => $message ,'user' => $data_user),
    $_POST['socket_id']
);
echo json_encode(array('message' => $message,'user' => $data_user,'avatar'=>$avatar)) ;

然后我尝试使用 javscript 显示它们，

channel.bind('new_comments',function(data){
   $('.chat-widget').append("<div class='row'>\
       <div class='chat_post col-lg-12'>\
        <div class='media'>\
         <a class='pull-left' href='#'>\
              <img class='media-object img-circle' width=30 height=30 src='" + data.avatar +"' alt=''>\
                  </a>\
                  <div class='media-body'>\
                      <h4 class='media-heading chat-name'><a href='profile.php?user=" + data.user + "' class='user_profile'>" + data.user + "</a>\
                          <span class='small pull-right'>12:23 PM</span>\
                      </h4>" + data.message + " </div>\
                    </div>\
                </div>\
                </div>\
            <hr>\
");

【问题讨论】：

您的图片有多大？您可能正在点击10kB limit。由于这个限制，最好只通过 Pusher 发送图像的 URL，并从您的服务器提供图像本身。
是的，谢谢，解决了我的问题，谢谢老板！
太棒了；我会发布它作为答案。

标签： javascript php jquery html pusher

【解决方案1】：

如 cmets 中所述，消息大小超过了 10kB 的限制。由于这个限制，最好只通过 Pusher 发送图像的 URL，并从您的服务器提供图像本身。

【讨论】：

【解决方案2】：

像现代信使一样，将图像副本存储到数据库中，尺寸应该非常小（在 php 中使用 GD 等图像库），减小尺寸到 100X100 像素之类的东西，并使用 Blur 滤镜来减小尺寸。然后将消息保存为 BLOB 类型在数据库中。然后你可以用socket发送它，你遵循推送规则！

第二个副本不保存在数据库中，您必须将其存储在存储中，当收到消息时，用户必须单击预览图像（小尺寸）以根据 URL 下载。

您还可以使用 javascript 或 JQuery 在接收消息事件触发后建立自动下载机制。

【讨论】：