这份文档还在翻译中,预期年底前完成。欢迎您提供宝贵的意见及建议。
Send and Receive Images
Overview
This guide covers sending and receiving images within a conversation.
Before you begin, make sure you added the SDK to your app and you are able to create a conversation.
NOTE: A step-by-step tutorial to build a chat application is available here.
This guide will make use of the following concepts:
-
Conversation Events -
image
events that fire on a Conversation, after you are a Member
Send an Image
Given a conversation you are already a member of:
const fileInput = document.getElementById('fileInput');
conversation.sendImage(fileInput.files[0]).then((imageRequest) => {
...
}).catch(errorLogger)
conversation.sendAttachment(imageFile, object : NexmoRequestListener<Void> {
override fun onSuccess(p0: Void?) {
Log.d("TAG", "Image sent")
}
override fun onError(apiError: NexmoApiError) {
Log.d("TAG", "Error: Image not sent ${apiError.message}")
}
})
conversation.sendAttachment(imageFile, new NexmoRequestListener<Void>() {
public void onSuccess(@Nullable Void p0) {
Log.d("TAG", "Image sent");
}
public void onError(@NotNull NexmoApiError apiError) {
Log.d("TAG", "Error: Image not sent " + apiError.getMessage());
}
});
let image = UIImage(named: "file.png")
guard let imageData = image?.pngData() else { return }
conversation.sendAttachment(with: NXMAttachmentType.image,
name: "File name",
data: imageData,
completionHandler: { (error) in
if let error = error {
NSLog("Error sending image: \(error.localizedDescription)")
return
}
NSLog("Image sent")
})
[conversation sendAttachmentWithType:NXMAttachmentTypeImage
name:@"File name"
data:[NSData dataWithContentsOfFile:@"file.png"]
completionHandler:^(NSError * _Nullable error) {
NSLog(@"Image sent");
}];
Receive an Image
A image
conversation event will be received when a member sends an image to a conversation:
conversation.on('image', (sender, event) => {
console.log('*** Image received', sender, event);
});
private val messageListener = object : NexmoMessageEventListener {
override fun onTypingEvent(typingEvent: NexmoTypingEvent) {}
override fun onAttachmentEvent(attachmentEvent: NexmoAttachmentEvent) {
val userName = attachmentEvent.fromMember.user.name
Log.d("TAG", "Image event received. User $userName")
// Event contains URL's for multiple sizes of images
attachmentEvent.original.url
attachmentEvent.medium.url
attachmentEvent.thumbnail.url
//Download the image using one of open-source libraries: Coil, Picasso, Glide, etc.
}
override fun onTextEvent(textEvent: NexmoTextEvent) {}
override fun onSeenReceipt(seenEvent: NexmoSeenEvent) {}
override fun onEventDeleted(deletedEvent: NexmoDeletedEvent) {}
override fun onDeliveredReceipt(deliveredEvent: NexmoDeliveredEvent) {}
}
conversation?.addMessageEventListener(messageListener)
private NexmoMessageEventListener messageListener = new NexmoMessageEventListener() {
@Override
public void onTextEvent(@NonNull NexmoTextEvent textEvent) {}
@Override
public void onAttachmentEvent(@NonNull NexmoAttachmentEvent attachmentEvent) {
String userName = attachmentEvent.getFromMember().getUser().getName();
Log.d("TAG", "Image event received. User " + userName);
// Event contains URL's for multiple sizes of images
attachmentEvent.getOriginal().getUrl();
attachmentEvent.getMedium().getUrl();
attachmentEvent.getThumbnail().getUrl();
//Download the image using one of open-source libraries: Coil, Picasso, Glide, etc.
}
@Override
public void onEventDeleted(@NonNull NexmoDeletedEvent deletedEvent) {}
@Override
public void onSeenReceipt(@NonNull NexmoSeenEvent seenEvent) {}
@Override
public void onDeliveredReceipt(@NonNull NexmoDeliveredEvent deliveredEvent) {}
@Override
public void onTypingEvent(@NonNull NexmoTypingEvent typingEvent) {}
};
conversation.addMessageEventListener(messageListener);
Add NXMConversationDelegate
as an extension to a ViewController
or similar, and implement conversation(_ conversation: NXMConversation, didReceive event: NXMImageEvent)
:
Note: The first method below is required when implementing NXMConversationDelegate
:
extension ViewController: NXMConversationDelegate {
func conversation(_ conversation: NXMConversation, didReceive error: Error) {
NSLog("Conversation error: \(error.localizedDescription)")
}
func conversation(_ conversation: NXMConversation, didReceive event: NXMImageEvent) {
NSLog("Received image event: \(event.originalImage)")
}
}
Have a ViewController
, or similar, conform to NXMConversationDelegate
and implement conversation:didReceiveImageEvent:
:
Note: The first method below is required when implementing NXMConversationDelegate
:
- (void)conversation:(NXMConversation *)conversation didReceive:(NSError *)error {
NSLog(@"Conversation error: %@", error.localizedDescription);
}
- (void)conversation:(NXMConversation *)conversation didReceiveImageEvent:(NXMImageEvent *)event {
NSLog(@"Received image event: %@", event.originalImage);
}