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

Question

我正在尝试使用推送器使用图像进行实时聊天我找不到任何关于如何使用推送器显示图像的信息我使用 BLOB 存储图像但无法在客户端的 javascript 中显示它们，键入消息的人刚好找到图像，但在另一个人的屏幕上返回未定义。我没有 post 提交 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>\
");

Answer 1

如评论中所述，邮件大小超过了 10kB 的限制。由于此限制，更好的做法是仅通过 Pusher 发送图像的 URL，并从您的服务器提供图像本身。

Answer 2

就像一个现代的信使，在数据库中存储你的图像的副本，一个应该有非常小的尺寸（使用像GD这样的图像库在php)，将尺寸缩小到 100X100 像素，并使用 Blur 滤镜来缩小尺寸。然后在数据库中保存消息 AS BLOB 类型。然后你可以用套接字发送它并且你遵循了推送器规则！

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

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

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

how to display images pusher real time chat

html

javascript

php

jquery

pusher