pusher / chatkit-client-js

JavaScript client SDK for Pusher Chatkit
https://pusher.com/chatkit
MIT License
90 stars 15 forks source link

sendMessage not displaying image (sending as link) #216

Closed hueyAtFetchly closed 4 years ago

hueyAtFetchly commented 4 years ago

I am properly instantiating the currentUser object, and calling sendMessage with the below payload.

{
"roomId":"{myRoomId}",
"text":" ",
"attachment":{
   "link":"https://firebasestorage.googleapis.com/v0/b/regroop-fetchly.appspot.com/o/file-test-1.png?alt=media&token=0e27aa59-924c-404d-ab2c-e83366d6b884",
   "type":"image"
}

The message comes back but the data for the message has no image link or like details. I get (sorry not in JSON format, copied from console):

createdAt: Fri Oct 25 2019 16:58:39 GMT-0600 (Mountain Daylight Time) {}
text: " "
user: {_id: "regroop_3", name: "regroop_3"}
_id: 102504571

I would expect as the client successfully uploaded, that I would retrieve a whole message with image link... but I do not. I peered through at the source code, nothing else seems to required of my payload.

Why is this failing?

Also the documentation portal suggests another method (using sendMultipartMessage) which results in the same behavior, as does sendSimpleMessage.

callum-oakley commented 4 years ago

Hi @hueyAtFetchly, that does indeed look like it should work. What does the received message object look like if you log out the whole thing? Have you checked the message ID returned from sendMessage to confirm that the message you receive is the same one you're sending?

hueyAtFetchly commented 4 years ago

Hi @callum-oakley

I tried again to log that exactly, with no success.

Using sendSimpleMessage I send payload:

{ 
    "roomId":"regroop-75-1571354698622", 
     "text":" ", 
     "attachment": {
              "link":"https://firebasestorage.googleapis.com/v0/b/regroop-fetchly.appspot.com/o/file-test-1.png?alt=media&token=611c74b9-0e3f-41b3-8a9e-65cdfb6681c6",
              "type":"image"
          }
}

I get message ID: 102524581 That message when logged out gives me only:

{ 
    "_id":102524581, 
    "text":" ", 
     "createdAt":"2019-10-28T15:34:14.000Z", 
     "user": {
           "_id":"regroop_3",
           "name":"regroop_3"
     }
}

I have checked the source code, it looks as though I am calling it correctly. Is it possible that server side code at Pusher has changed and SDK needs updating?

at0dd commented 4 years ago

@hueyAtFetchly what version of the chatkit-client-js are you using? sendMessage was depreciated in 1.4.0. Per the docs, sendSimpleMessage does not have an attachment property. You can use sendMultipartMessage to send your image link as a url part.

hueyAtFetchly commented 4 years ago

Yep, I have tried all message methods.

Just to entertain it, I have used sendMultipartMessage with: 1.13.0 from Sept 18 and 1.9.2 neither of them give expected result:

I have sent:

.sendMultipartMessage({
  "roomId": "regroop-75-1571354698622",
  "parts": [
    {
      "type": "text/plain",
      "content": " "
    },
    {
      "type": "image/png",
      "url": "https://firebasestorage.googleapis.com/v0/b/regroop-fetchly.appspot.com/o/file-test-1.png?alt=media&token=597723a8-6a81-4310-8092-e74eb71d5fac"
    }
  ]
}) 

In both cases this gives me a message like:

{
  "_id": 102525156,
  "text": " ",
  "createdAt": "2019-10-28T16:35:38.000Z",
  "user": {
    "_id": "regroop_3",
    "name": "regroop_3"
  }
}

Also if you look at the source, sendSimpleMessage does utilize attachment. This was the method I used above.

I have tried all three sending message methods, none of these (sendSimpleMessage, sendMessage, sendMultipartMessage) are working. I will obviously not test with sendMessage any further, thanks.

Still, it would be great to have a solve for the above issue.

at0dd commented 4 years ago

How are you retrieving the messages? Are you using currentUser.subscribeToRoomMultipart?

hueyAtFetchly commented 4 years ago

From both 1.13.0 and 1.9.2 (happy to use whatever version you would suggest though).

When I call currentUser.subscribeToRoomMultipart the messages don't get any content properties on them. I get:

{
"_id":102525156,
"createdAt":"2019-10-28T16:35:38.000Z",
"user": {
     "_id":"regroop_3",
     "name":"regroop_3"
}
}

I used the official Pusher demo app as a starting point. In that demo the method is subscribeToRoom, but neither of these methods work to get messages with an attachment.

hueyAtFetchly commented 4 years ago

Not sure your affiliation, but if you are at Pusher, can you just pull my message by _id to see if your server is even receiving the message with attachment correctly?

I would assume there has been a server side code change that is causing this issue for the JS client.

at0dd commented 4 years ago

Hmm. I'm not with Pusher, but recently implemented Chatkit. It very well could be the server. I'm using v 1.6 of https://github.com/pusher/chatkit-server-php

callum-oakley commented 4 years ago

@hueyAtFetchly that doesn't look like a message object as returned by the JS SDK. There's no _id field in the SDK's message object, just an id field (no underscore).

Are you transforming the messages somewhere and dropping the attachment? What is the demo that you're using? It's possible this demo is out of date or was never written to support attachments.

(also thanks for your help @at0dd 🙂)

hueyAtFetchly commented 4 years ago

Thank you @callum-oakley and @at0dd, you can close this. It is very much my fault.

The comment regarding _id helped me solve this. There is a couple lines of code from the tutorial where the data gets munged and obviously keeps this from working the way it needs to (see below).

        const {id, senderId, text, createdAt} = data;
        const incomingMessage = {
            _id: id,
            text: text,
            createdAt: new Date(createdAt),
            user: {
                _id: senderId,
                name: senderId,
                avatar: this.avatar(senderId),
            },
        }

I believe the reason the data is munged is to avoid circular JSON which has the chat blowing up, but that is something else entirely.

This is not an issue as the data variable has all of what I need... sincerely sorry for the trouble.

Thanks for the help!

callum-oakley commented 4 years ago

No worries at all! Thanks for the update. 🙂