ChatWindow.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!--
  2. *
  3. * EliasDB - Chat example
  4. *
  5. * Copyright 2019 Matthias Ladkau. All rights reserved.
  6. *
  7. * This Source Code Form is subject to the terms of the Mozilla Public
  8. * License, v. 2.0. If a copy of the MPL was not distributed with this
  9. * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  10. *
  11. Chat window which displays an ongoing chat channel.
  12. -->
  13. <template>
  14. <div>
  15. <div class="chat-msg-window"
  16. v-for="msg in messages"
  17. v-bind:key="msg.key">
  18. <div>{{msg.message}}</div>
  19. </div>
  20. <chat-text-area :channel="channel"/>
  21. </div>
  22. </template>
  23. <script lang="ts">
  24. import Vue from "vue";
  25. import ChatTextArea from './ChatTextArea.vue';
  26. import {EliasDBGraphQLClient} from "../lib/eliasdb-graphql";
  27. interface Message {
  28. key: string
  29. message: string
  30. }
  31. export default Vue.extend({
  32. props: ['channel'],
  33. data() {
  34. return {
  35. client : new EliasDBGraphQLClient(),
  36. messages : [] as Message[],
  37. }
  38. },
  39. mounted: function () {
  40. // Ensure channel node exists
  41. this.client.req(`
  42. mutation($node : NodeTemplate) {
  43. ${this.channel}(storeNode : $node) { }
  44. }`,
  45. {
  46. node : {
  47. key : this.channel,
  48. kind : this.channel,
  49. }
  50. })
  51. .catch(e => {
  52. console.error("Could not join channel:", e);
  53. });
  54. // Start subscription
  55. this.client.subscribe(`
  56. subscription {
  57. ${this.channel}(ascending:key, last:11) { # last:11 because channel node will be last
  58. key,
  59. message,
  60. }
  61. }`,
  62. data => {
  63. const messages = data.data[this.channel] as Message[];
  64. this.messages = messages.filter(m => !!m.message);
  65. });
  66. },
  67. components: {
  68. ChatTextArea,
  69. },
  70. });
  71. </script>
  72. <style>
  73. </style>