Nota: Estas API todavía están en alfa, y puede haber cambios en la implementación en el futuro.
Las API de cliente disponibles para el canal API lo ayudarán a construir interfaces orientadas al cliente.
Estas API son útiles para casos similares a los que se describen a continuación.
Use una interfaz de chat personalizada en lugar del widget de chat
Cree interfaces de conversación en sus aplicaciones móviles
Agregue a otras plataformas para las cuales no tiene un SDK oficial
Crear objetos de cliente
Puede crear y recuperar objetos de datos de clientes utilizando el inbox_identifier y customer_identifier.
Identificador de bandeja de entrada
Puedes obtener el inbox_identifier desde su canal API - > Configuración - > Configuración
Identificador del cliente
los customer_identifier o el source_id se puede obtener al crear el cliente usando el crear API. Deberá almacenar este identificador en su lado del cliente para realizar más solicitudes en nombre del cliente. Esto se puede hacer en cookies, almacenamiento local, etc.
API disponibles
Las API de cliente disponibles están documentadas aquí. Algunas de las cosas que puede hacer a través de las API son
Crear, ver y actualizar contacto
Crear y enumerar conversaciones
Crear, enumerar y actualizar mensajes
Autenticación HMAC
Las API del cliente también son compatibles Autenticación HMAC. El token HMAC para el Canal se puede obtener ejecutando lo siguiente en su consola de rieles.
# replace api_inbox_id with your inbox id
Inbox.find(api_inbox_id).channel.hmac_token
Conexión a los WebSockets
Para recibir las actualizaciones en tiempo real del panel de agentes, puede conectarse a los WebSockets. La conexión de WebSockets se puede hacer en la siguiente URL
<your installation url>/cable
Autenticar su conexión WebSocket
Comenzará a recibir los eventos dirigidos a su objeto de cliente después de suscribirse utilizando el cliente pubsub_token. pubsub_token se proporciona durante la llamada de API de creación del cliente.
Encuentre la lista completa de eventos compatibles con los sockets web aquí.
Implementación
interfaz de chat de ejemplo sobre las API del cliente
frontend.js
$(function () {
"use strict";
window.plataforma = {};
// update the inbox identifier
plataforma.inboxIdentifier = "bXKr2F2asDjztoVipLF9Lt8v";
plataforma.chatAPIUrl = "http://localhost:3000/public/api/v1/"
// for better performance - to avoid searching in DOM
var content = $('#content');
var input = $('#input');
var status = $('#status');
var xhttp = new XMLHttpRequest();
// if user is running mozilla then use it's built-in WebSocket
window.WebSocket = window.WebSocket || window.MozWebSocket;
// if browser doesn't support WebSocket, just show some notification and exit
if (!window.WebSocket) {
content.html($('<p>', { text: 'Sorry, but your browser doesn\'t '
+ 'support WebSockets.'} ));
input.hide();
$('span').hide();
return;
}
// open connection
var connection = new WebSocket('ws://localhost:3000/cable');
connection.onopen = function () {
// check whether we have a pubsub token and contact identifier or else set one
setUpContact();
setUpConversation();
// first we want users to subscribe to the plataform webhooks
connection.send(JSON.stringify({command:"subscribe", identifier: "{\"channel\":\"RoomChannel\",\"pubsub_token\":\""+plataform.contactPubsubToken+"\"}" }));
input.removeAttr('disabled');
status.text('Send Message:');
};
connection.onerror = function (error) {
// just in there were some problems with connection...
content.html($('<p>', { text: 'Sorry, but there\'s some problem with your '
+ 'connection or the server is down.' } ));
};
// most important part - incoming messages
connection.onmessage = function (message) {
// try to parse JSON message. Because we know that the server always returns
// JSON this should work without any problem but we should make sure that
// the massage is not chunked or otherwise damaged.
try {
var json = JSON.parse(message.data);
} catch (e) {
console.log('This doesn\'t look like a valid JSON: ', message.data);
return;
}
if (json.type === 'welcome') {
// lets ignore the welcome
} else if (json.type === 'ping') {
// lets ignore the pings
} else if (json.type === 'confirm_subscription') {
// lets ignore the confirmation
}else if (json.message.event === 'message.created') {
console.log('here comes message', json);
if(json.message.data.message_type === 1)
{
addMessage(json.message.data.sender.name, json.message.data.content);
}
} else {
console.log('Hmm..., I\'ve never seen JSON like this: ', json);
}
};
/**
* Send mesage when user presses Enter key
*/
input.keydown(function(e) {
if (e.keyCode === 13) {
var msg = $(this).val();
if (!msg) {
return;
}
// send the message
//connection.send(msg);
sendMessage(msg);
addMessage("me", msg)
$(this).val('');
}
});
/**
* This method is optional. If the server wasn't able to respond to the
* in 3 seconds then show some error message to notify the user that
* something is wrong.
*/
setInterval(function() {
if (connection.readyState !== 1) {
status.text('Error');
input.attr('disabled', 'disabled').val('Unable to communicate '
+ 'with the WebSocket server.');
}
}, 3000);
/**
* Add message to the chat window
*/
function addMessage(author, message) {
content.append('<p><span>' + author + '</span> @ ' + ':' + message + '</p>');
content.scrollTop(1000000);
}
function setUpContact() {
if(getCookie('contactIdentifier')){
plataform.contactIdentifier = getCookie('contactIdentifier');
plataforma.contactPubsubToken = getCookie('contactPubsubToken')
}else{
xhttp.open("POST", plataform.plataformaAPIUrl + "inboxes/"+plataform.inboxIdentifier+"/contacts");
xhttp.send();
var contactPubsubToken = JSON.parse(xhttp.responseText).pubsub_token;
var contactIdentifier = JSON.parse(xhttp.responseText).source_id;
setCookie('contactIdentifier',contactIdentifier,30);
setCookie('contactPubsubToken',contactPubsubToken,30);
}
}
function setUpConversation() {
if(getCookie('contactConverstion')){
plataforma.contactConverstion = getCookie('contactConverstion');
}else{
xhttp.open("POST", plataforma.plataformaAPIUrl + "inboxes/"+plataforma.inboxIdentifier+"/contacts/"+plataforma.contactIdentifier+"/conversations", false);
xhttp.send();
var contactConverstion = JSON.parse(xhttp.responseText).id;
setCookie('contactConverstion',contactConverstion,30);
}
}
function sendMessage(msg){
xhttp.open("POST", plataforma.plataformaAPIUrl + "inboxes/"+plataforma.inboxIdentifier+"/contacts/"+plataforma.contactIdentifier+"/conversations/"+plataforma.contactConverstion+"/messages", false);
xhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhttp.send(JSON.stringify({content: msg}));
}
function setCookie(name,value,days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days*24*60*60*1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
function eraseCookie(name) {
document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
}
});