Twilio ConversationsとVue.jsでチャットアプリケーションを作る（後編）

cd src/components
rm HelloWorld.vue
touch Chat.vue Conversation.vue

<template>
 <div id="chat">
   <h1>Welcome to the Vue chat app<span v-if="nameRegistered">, {{ name }}</span>!</h1>
   <p>{{ statusString }}</p>
   <div v-if="!nameRegistered">
     <input @keyup.enter="registerName" v-model="name" placeholder="Enter your name">
     <button @click="registerName">Register name</button>
   </div>
   <div v-if="nameRegistered && !activeConversation && isConnected">
     <button @click="createConversation">Join chat</button>
   </div>
   <Conversation v-if="activeConversation" :active-conversation="activeConversation" :name="name" />
 </div>
</template>

<style scoped>
ul {
 list-style-type: none;
 padding: 0;
}

li {
 display: inline-block;
 margin: 0 10px;
}

a {
 color: #42b983;
}
</style>

<script>
import {Client as ConversationsClient} from "@twilio/conversations"
import Conversation from "./Conversation"

export default {
   components: { Conversation },
   data() {
       return {
           statusString: "",
           activeConversation: null,
           name: "",
           nameRegistered: false,
           isConnected: false
       }
   },
}
</script>

methods: {
   initConversationsClient: async function() {
       window.conversationsClient = ConversationsClient
       const token = await this.getToken(this.name)
       this.conversationsClient = await ConversationsClient.create(token)
       this.statusString = "Connecting to Twilio…"
       this.conversationsClient.on("connectionStateChanged", (state) => {
           switch (state) {
           case "connected":
               this.statusString = "You are connected."
               this.isConnected = true
               break
           case "disconnecting":
               this.statusString = "Disconnecting from Twilio…"
               break
           case "disconnected":
               this.statusString = "Disconnected."
               break
           case "denied":
               this.statusString = "Failed to connect."
               break
           }
       })
   },
}

getToken: async function(identity) {
   const response = await fetch(`http://localhost:5000/auth/user/${identity}`)
   const responseJson = await response.json()
   return responseJson.token
},

registerName: async function() {
   this.nameRegistered = true
   await this.initConversationsClient()
},

 createConversation: async function() {
   // Ensure User1 and User2 have an open client session
   try {
       await this.conversationsClient.getUser("User1")
       await this.conversationsClient.getUser("User2")
   } catch {
       console.error("Waiting for User1 and User2 client sessions")
       return
   }
   // Try to create a new conversation and add User1 and User2
   // If it already exists, join instead
   try {
       const newConversation = await this.conversationsClient.createConversation({uniqueName: "chat"})
       const joinedConversation = await newConversation.join().catch(err => console.log(err))
       await joinedConversation.add("User1").catch(err => console.log("error: ", err))
       await joinedConversation.add("User2").catch(err => console.log("error: ", err))
       this.activeConversation = joinedConversation
   } catch {
       this.activeConversation = await (this.conversationsClient.getConversationByUniqueName("chat"))
   }
}

<template>
  <Chat />
</template>

<script>
import Chat from "./components/Chat.vue"
import "@twilio/conversations"
export default {
	name: "App",
	components: {
		Chat
	}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
#app input {
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-right: 5px;
  width: 300px;
}
#app button {
  background-color: #21cfbc;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

npm run serve

<template>
 <div id="conversation">
   <div class="conversation-container">
     <div
       v-for="message in messages" :key="message.index"
       class="bubble-container"
       :class="{ myMessage: message?.state?.author === name }"
     >
       <div class="bubble">
         <div class="name">{{ message?.state?.author }}:</div>
         <div class="message">{{ message?.state?.body }}</div>
       </div>
     </div>
   </div>
   <div class="input-container">
     <input @keyup.enter="sendMessage" v-model="messageText" placeholder="Enter your message">
     <button @click="sendMessage">Send message</button>
   </div>
 </div>
</template>

<style scoped>
.conversation-container {
 margin: 0 auto;
 max-width: 400px;
 height: 600px;
 padding: 0 20px;
 border: 3px solid #f1f1f1;
 overflow: scroll;
}

.bubble-container {
 text-align: left;
}

.bubble {
 border: 2px solid #f1f1f1;
 background-color: #fdfbfa;
 border-radius: 5px;
 padding: 10px;
 margin: 10px 0;
 width: 230px;
 float: right;
}

.myMessage .bubble {
 background-color: #abf1ea;
 border: 2px solid #87E0D7;
 float: left;
}

.name {
 padding-right: 8px;
 font-size: 11px;
}

::-webkit-scrollbar {
 width: 10px;
}

::-webkit-scrollbar-track {
 background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
 background: #888;
}

::-webkit-scrollbar-thumb:hover {
 background: #555;
}
</style>

<script>
export default {
 props: ["activeConversation", "name"],
 data() {
   return {
     messages: [],
     messageText: "",
     isSignedInUser: false
   }
 },
}
</script>

   <Conversation :active-conversation="activeConversation" :name="name" />

 mounted() {
   this.activeConversation.getMessages()
     .then((newMessages) => {
       this.messages = [...this.messages, ...newMessages.items]
     })
   this.activeConversation.on("messageAdded", (message) => {
     this.messages = [...this.messages, message]
   })
 },

 methods: {
   sendMessage: function() {
     this.activeConversation.sendMessage(this.messageText)
       .then(() => {
         this.messageText = ""
       })
   }
 }