Add clientId usage for detecting user

Author: tomczoink

app/component/AblyBaseComponent.js

@@ -15,7 +15,12 @@ export default class AblyBaseComponent extends HTMLElement {
     connectToAblyChannel() {
         const ablyApiKey = this.getAttribute("data-api-key");
         const ablyTokenUrl = this.getAttribute("data-get-token-url");
-        const ablyConfig = ablyApiKey ? ablyApiKey : { authUrl: ablyTokenUrl };
+        let ablyConfig = {};
+        if (ablyApiKey) {
+          ablyConfig['key'] = ablyApiKey;
+        } else {
+          ablyConfig['authUrl'] = ablyTokenUrl;
+        }
 
         this.ably = new Ably.Realtime(ablyConfig);
         this.subscribedChannels = [];

app/component/AblyChatComponent.js

@@ -89,9 +89,16 @@ export default class AblyChat extends AblyBaseComponent {
         }
     }
 
-    formatMessages(messages) {            
+    formatMessages(messages) {
         const messageMarkup = messages.map((message, index) => {
-            const author = message.connectionId === this.ably.connection.id ? "me" : "other";
+            const clientId = message.clientId;
+            let author;
+            if (clientId) {
+                author = this.ably.auth.clientId === clientId ? "me" : clientId;
+            } else {
+                author = message.connectionId === this.ably.connection.id ? "me" : "other";
+            }
+
             return `<span class="message" data-author=${author}>${message.data}</span>`;
         });
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "ably-chat-component",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "Real time chat from Ably - just add your own API key!",
   "main": "build/index.js",
   "exports": {