Aviso de deprecación
ChatEngine ha estado en desuso sin planes para lanzamientos adicionales. El soporte para el SDK de ChatEngine finalizará el 16 de julio de 2021. Si tiene preguntas sobre ChatEngine, contáctenos a [email protected]. Visite nuestro nuevo producto de chat, chat de pubnub.
Marco de chatengine de pubnub
PubNub ChatEngine es un marco basado en emisores de eventos orientados a objetos para crear aplicaciones de chat en JavaScript. Reduce el tiempo para construir aplicaciones de chat drásticamente y proporciona componentes esenciales como indicadores de escritura, monitoreo de presencia en línea e historial de mensajes fuera de la caja.
PUBNUB proporciona el componente del servidor en tiempo real. ChatEngine está diseñado para ser extensible e incluye un marco de complementos para simplificar las nuevas características.
Para obtener más información sobre la creación de aplicaciones de chat con PUBNUB, consulte nuestro Centro de recursos de chat.
Documentación
Puede encontrar los documentos completos en el sitio web de documentación.
Empezando
Requisitos previos
- Nodejs
- Bootstrap de Twitter
- jQuery
- ES6
Configuración de la cuenta de PubNub
Para configurar ChatEngine en Pubnub, primero debe configurar una tecla PubNub. Los siguientes pasos describen cómo configurar manualmente una tecla PubNub para trabajar con los SDK del lado del cliente de ChatEngine.
Regístrese para una cuenta de PubNub
Si aún no tiene una cuenta, puede crear una gratis aquí.
Configure el servicio REST API utilizando las funciones de PubNub
El marco ChatEngine y los SDK del lado del cliente interactúan con un servicio API REST que se ejecuta como una función PUBNUB.
Deberá configurar la función en su cuenta PubNub antes de poder usar los SDK.
Siga las instrucciones de configuración del servidor ChatEngine.
Código de descarga
Crear un nuevo proyecto NPM
Dado que instalaremos dependencias, es útil crear un nuevo package.json para realizar un seguimiento de todos los paquetes que vamos a instalar.
En su directorio de proyecto, ejecute este comando para crear un nuevo paquete. Complete la guía de configuración interactiva y estaremos listos para comenzar.
Eso creará un package.json en el directorio de su proyecto.
{
"name" : " chat-engine-tutorial " ,
"version" : " 0.0.1 " ,
"description" : " An example PubNub ChatEngine Tutorial " ,
"main" : " index.js " ,
"author" : " Ian Jennings "
} Instalar pubnub chatEngine
Muy bien, ¡ahora por la parte que probablemente nunca hayas hecho antes! Instale PubNub ChatEngine ejecutando:
npm install chat-engine@latest --save
Recursos adicionales
Complementos
Echa un vistazo al fregadero de la cocina jQuery y los ejemplos de fregadero de cocina angular para ver complementos en acción.
- Cargas de imágenes: utiliza el servicio de carga para cargar imágenes y las representa en los chats. Ejemplo.
- Soporte de Markdown: represente en HTML al recibir mensajes. Ejemplo.
- Usuarios silenciosos: permite al usuario actual dejar de recibir eventos de otros usuarios. Ejemplo.
- Búsqueda de usuarios en línea: una forma simple de buscar en la lista de usuarios en línea en el chat. Ejemplo.
- Indicador de escritura: proporciona métodos de conveniencia que se disparan cuando un usuario comienza o deja de escribir. Ejemplo
- Mensajes no leídos: le permiten marcar un chat como estar en segundo plano e incrementa un contador a medida que se envían eventos. Ejemplo.
- Notificaciones de escritorio: utiliza la API de notificación HTML5 para enviar actualizaciones de "tostadora".
- Soporte de emoji: utiliza imágenes como alternativa para dispositivos que aún no soportan?
- Estado del evento y recibos de lectura: emite eventos adicionales cuando alguien lee un recibe y/o lee un mensaje.
- Soporte de Gravatar: utiliza el servicio Gravatar para crear un avatar basado en la información de estado del usuario.
- Nombres de usuario aleatorios: un complemento que le da a cada usuario un nombre de usuario aleatorio que combina color y un animal.
Videos
- Introducción de ChatEngine
- Tutorial de chatengine de 5 minutos
- Chatear en 30 líneas de seminarios web de código
Tutoriales
Javascript
- Tutorial de inicio.
- Chat - Ejemplo de chat muy simple. El "Hello World" de ChatEngine.
- Lista en línea: sin chats, solo renderiza quién está en línea. Vea los fregaderos de la cocina sobre cómo combinar esto con chats privados.
React Native + Mobile
- React Ejemplo nativo: hecho con
create-react-app . - React Componentes nativos: componentes prefabricados para hacer chats, mensajes, usuarios y más.
- Integrando en una aplicación iOS existente: guía para agregar la aplicación ChatEngine React Native a iOS.
- Integrando en una aplicación de Android existente: Guía para agregar la aplicación ChatEngine React Native en Android.
Reaccionar
- React - Bare Bones React Ejemplo de la web.
Vue
- Guía Vue: guía sobre el uso de ChatEngine y Vue juntos. Utiliza los siguientes recursos.
- Ejemplo de Vue - Ejemplo de chatengine vue completo.
- Vue Plugin - ChatEngine Plugin para Vue.
Angular
- Angular Simple - Aplicación Angular "Hello World". Aplicación simple que utiliza un complemento angular personalizado para renderizar cuándo se actualiza algo.
- Angular Kitchen Fregn: la aplicación de demostración más grande que existe, casi un clon de chat de equipo de escritorio completo (holgura, zancada, flujo de flujo). ¡URL persistentes y se convierte en una aplicación de escritorio real con electrones!
jQuery
- JQuery Simple - Aplicación JQuery Chatengine "Hello World". Una aplicación simple donde todos charlan juntos.
- JQuery Kitchen Sink: gran ejemplo que utiliza la mayoría de las características de ChatEngine. Tiene una lista en línea que genera nuevos chats cuando hace clic en los nombres de usuario.
Autenticación de terceros
- Inicio de sesión de Facebook: use los perfiles de Facebook con ChatEngine.
Nodejs + chatbot
- NodeJS Chatbot: un Bot de ejemplo que responde a los mensajes y emula la escritura. Funciona con el ejemplo de fregadero de cocina jQuery de forma predeterminada.
Desarrollo
Clonación
Repos clon (motor de chat y complementos).
Todas las repos se deben ser hermanos unos de otros. Esto es necesario para representar los documentos correctamente.
chat-engine
chat-engine-desktop-notifications
chat-engine-emoji
chat-engine-examples
//...
Configuración del medio ambiente
Ejecute http-server desde mi directorio de mi /development que tiene todos los reposadores de motores de chat:
cd chat-engine
node server.js
Cargar http: // localhost: 8080 en el navegador y navegar a/chat-ingenio-examples/jQuery/kitchen-sink
Compilación
Ejecute gulp para compilar, pero probablemente debería ejecutar gulp watch para obtener cambios consistentes.
Pruebas de ejecución
Deberá asignar variables de entorno PUB_KEY_0 y SUB_KEY_0 a sus propias claves PubNub. Agregue estas variables a su .bashrc o .zshrc .
# pubnub chatengine keys
export PUB_KEY_0= " YOUR PUBNUB PUBLISH KEY "
export SUB_KEY_0= " YOUR PUBNUB SUBSCRIBE KEY "
Luego, en la carpeta raíz ejecutando:
Lanzar un parche (motor de chat y complementos)
npm version patch && git push origin master --tags
Apoyo
- Si necesita ayuda , tiene una pregunta general o para presentar un error , comuníquese con [email protected]