CODEWITHSUNDEEP
javascriptphpjqueryhtmlpusher
Markese P
Markese P

Reputation: 105

how to display images pusher real time chat

im trying to use images for a real time chat using pusher i cant find anything on how to display images using pusher i store the images using BLOB but cant display them in the javascript on the client side, the person who types the message the image comes up just find but on the other person screen its coming back undefined. i didnt post the submit javascript because its working fine just the bind is not good 

$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)) ;

and then I try to display them using 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>\
");

Upvotes: 2

Views: 1808

Answers (2)

Hamid Abbasi
Hamid Abbasi

Reputation: 343

Like a modern messenger, store to copy of your image in DB, one should has very small size (Use of images library like GD in php), reduce size to something like 100X100 pixel and use Blur filter to decrease size. Then Save message AS BLOB type in database. then you can send it with socket and you followed pusher rules!

Second copy doesn't save in DB, you must store it in Storage and when message received, user must click on preview image (small size) to download it based on URL.

You can also use of javascript or JQuery to make an auto download mechanism after receive message event fired.

Upvotes: 0

Will Sewell
Will Sewell

Reputation: 2643

As mentioned in the comments, message sizes were over the 10kB limit. Due to this limit, it is better practice to only send the URL of the image via Pusher, and serve the image itself from your server.

Upvotes: 3

Related Questions