app.js

import {log} from "./log";

export class App {
  constructor() {
    log.info("Starting application");
    // Set up the websocket
    const ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
    const ws_path = ws_scheme + '://' + window.location.host + "/chat/stream/";
    this.ws = new WebSocket(ws_path);
    this.ws.onmessage = this.onWSEvent;
    this.ws.onopen = this.onWSOpen;
    this.ws.onclose = this.onWSClose;
    // Internal state
    this.rooms = null; // Start null, then when the rooms load, set them
    this.currentRoom = '';
    this.messages = {}; // Messages are indexed by room id
    // The input field
    this.chatMsgInput = '';
    this.fooBar = "FooBar!";
    }

  onWSOpen(){
    // This executes once the connection opens.
    // Let's go ahead and ask for the rooms
    log.info(`Connected to websocket`);
    const msg = {
      cmd: 'rooms'
    };
    log.info(`fooBar ${this.fooBar}`);
    this.ws.send(JSON.stringify(msg));
  }

  onWSClose(){
    log.info('Disconnected from websocket');
  }

  onWSEvent(event){
    log.debug(`Websocket message recieved: ${JSON.stringify(event)}`);
    const data = JSON.parse(event);
    if (data.event === 'chat_msg'){
      // Chat messages are actually one of several types, depending on the
      // msg_type field, but we handle that in the view rather than here
      //
      // msg_type can be msg, join or leave
      this.handleChatMsg(data);
    } else if (data.type === 'join'){
      this.handleJoin(data);
    } else if (data.type === 'leave'){
      this.handleLeave(data);
    } else if (data.type === 'rooms'){
      this.handleRooms(data);
    }
  }

  handleRooms(data){
    const rooms = data.rooms;
    log.debug(`Rooms recvieved: ${rooms}`);
    this.rooms = rooms;
    rooms.forEach((roomId) => {
      if (! this.messages.hasOwnProperty(roomId)) {
        this.messages[roomId] = [];
      }
    }).bind(this);
  }

  handleJoin(data){
    const room = data.room;
    log.info(`Joining room ${room}`);
    if (! this.messages.hasOwnProperty(room)){
      this.messages[room] = [];
    }
    this.currentRoom = room;
  }

  handleLeave(data){
    log.info(`Leaving room ${room}`);
    this.currentRoom = '';
  }

  handleChatMsg(data){
    log.debug("Chat message recieved");
    // This code currently only suppports handling messages for the current room
    // we're in (though we can switch between rooms)
    if (data.room !== this.currentRoom){
      return;
    } else {
      // We could either remove extranious fields or only include the ones we
      // care about
      delete(data.msg_type);
      delete(data.event);
      this.messages[data.room].push(data);
    }
  }

  sendChatMsg(){
    log.debug(`Sending chat message: ${this.chatMsgInput}`);
    const msg = {
      cmd: 'send',
      room: this.currentRoom,
      body: this.chatMsgInput,
    };
    this.ws.send(JSON.stringify(msg));
    this.chatMsgInput = '';
  }
}