Disclosure: , powered by APIs, delivered through global infrastructure, has previously sponsored Hacker Noon. PubNub Technology companies cannot get through 2018 without somehow incorporating chat into their platform. Whether it be a medium for sales outreach, tech support, in-game chat, or your core product — there is a need for reliable, scalable chat, now. After seven years of ’s realtime data APIs, our customers have made it clear that . To give developers a head start and get off the ground in a fraction of the time, we created . An opinionated framework built on top of PubNub, ChatEngine is the wrapper that does the heavy lifting for chat integration. PubNub chat doesn’t work without PubNub ChatEngine secure The ChatEngine JavaScript SDK is available on NPM and also CDN. Integrating it into an existing web application is straightforward. In a matter of minutes, an app with features like , and more can be programed and enabled. Plugins like and are all available via NPM. The door for accessing even more power is opened by . chat rooms, presence, message history typing indicators, markdown emojis PubNub Functions PubNub Functions make a ChatEngine backend instantly able to support . Our catalog currently has more than with pre-built integrations for APIs like . AI based features 80 open source blocks Amazon Comprehend In this post we will take an in-depth dive into a demo application that shows how a Function can be dropped into an app to . Similar functionality can be enabled just as simply for each of the Amazon services thanks to serverless, open source, PubNub Functions: integrate sentiment analysis rapidly machine learning : Natural and fluent language translation Amazon Translate : Turn text into lifelike speech using deep learning Amazon Polly : Conversational interfaces for your applications (Coming to PubNub Functions soon!) Amazon Lex : Discover insights and relationships in text Amazon Comprehend Think of PubNub Functions as an in-transit message enricher by way of small node.js script. Imagine a chat message submitted from a ChatEngine application passing through the PubNub ecosystem. A developer can decide to include the above event handler on one or many channels in which PubNub messages travel. From within this event handler, we can provide some sort of message enrichment with plain JavaScript, or by making an HTTP request to an external API. For instance, a text message can be translated into another language by way of an HTTP request to the Amazon Translate API. When the request returns, we can overwrite the text message payload with the translated text. This code can be implemented as a , , or event handler. On Before On After After Presence In addition to being an in-transit message mutator, PubNub Functions can also be used as a REST API endpoint. This is what was of the Amazon Cognitive block in this tutorial. The chat app will for every ChatEngine message that is published. The sentiment will be gathered from Amazon, and the text bubble will change to the corresponding color of the sentiment analysis result. changed from the default code hit this REST endpoint : Positive Green : Negative Red : Neutral Grey Program a chat app with Amazon APIs in record time Follow this guide to build a ChatEngine demo app with sentiment analysis for all chat messages, powered by Amazon Comprehend and PubNub. The referenced code is available on GitHub . By using the existing demo ( ) from the , you can get started with a functional chat UI that is browser and mobile compatible. Importing ChatEngine to the web browser via CDN is painless. javascript/desktop.html PubNub ChatEngine Examples Repository Once you have , run the to automatically deploy the serverless backend of event handlers. Think of these as little, RESTful Node.js servers that run in the cloud. They are used for ChatEngine and ( ). signed up for PubNub ChatEngine Setup PubNub Functions user authentication policies, channel provisioning, presence state storage kvstore The maximum number of event handlers for a PubNub app is . We are going to add the third to our ChatEngine backend as the connector between the Amazon ML APIs and the chat app. I have made some changes to the open source code in the BLOCKS catalog, so our Comprehend block will be an of a Before Publish handler. This makes it more like a REST endpoint instead of an in transit message enricher. , in 3 On Request handler instead Code is here comprehend-pfunc.js. Go to the , click on your , then the tab on the left. You should see the ChatEngine module, click it, and then click to declare a new Function event handler. PubNub Admin Dashboard ChatEngine App FUNCTIONS create Next we’ll copy the edited source code for the Comprehend integration, found in , from the aforementioned GitHub repository. Paste the code into the editor. comprehend-function.js If you have not already, make an AWS account and get a Comprehend and . access key secret key ( find out how here ) Add those keys in the editor by clicking . This is a safe place to store keys and environment variables which are referenced in Functions event handler code. Be sure to use the key and so the reference in the event handler file is correct. Click . MY SECRETS AWS_access_key AWS_secret_key Vault SAVE Now that we have imported all of the necessary back end code, by clicking the of the Functions editor. This button deploys the new code globally in just a few seconds. Our ChatEngine front-end will now be able to groove. start the module button at the top right Before closing the Functions editor, click the button. This copies the REST endpoint URL for the service. Open the file in the project and paste this URL in (line 5). COPY URL app.js comprehendFunctionURI Visit the page for the app in the admin portal. Copy the and keys from the portal and paste them near the top of . Key Info Publish Subscribe app.js That’s it! All of the coding and configuring for the fullstack of this chat app is done. To run the app, boot a local server from the root directory of the project. If you have never done this before, I recommend installing . This runs a dev server on your machine by simply entering on the commandline, in your app directory. Once this is running, go to the localhost address in a web browser to see the UI . http-server from NPM http-server (by default http://localhost:8080) Every other client who boots this UI will see the same chat log as you. This instance is organized by your PubNub app’s and keys, and the . This UI can also be accessed from a mobile web browser, as is. Publish Subscribe chat channel Comprehend UI Functionality The method in which the Comprehend feature is architected is through a HTTP request made to the PubNub Function whenever a ChatEngine message renders. The render event writes the message to the DOM immediately and colors it grey. Next it asynchronously begins the Comprehend API request. Once the request returns, jQuery is used to select the elements in the DOM that are to be changed. A with a transition is used for the message bubble background, to change the color. Sentiment analysis percentages are added in a above the message bubble. CSS class span Type a message and enter it into the chat. Watch as the colors and sentiment analysis scores mutate the chat log! ChatEngine Features and Plugins See the extended features of by uncommenting the lines in that are noted with . This is how you would implement , , and the . ChatEngine and all of its plugins are open source on and available for import through NPM. ChatEngine plugins app.js UNCOMMENT chat log history fetch typing indicator markdown plugin PubNub’s GitHub Originally published at . www.pubnub.com
