Ionic 2 Chat

@richardmarais wrote:

Hi All,

I am trying to create a chat app.

I have a Java Server and Ionic 2 Client.

I get the following error:

ORIGINAL EXCEPTION: ReferenceError: io is not defined

Any suggestions please?

Thanks

---

I have the following code so far:

CLIENT
ts

import { Component, NgZone } from '@angular/core';
import { Http } from "@angular/http";
declare var io;
//require ('io');

@Component({
  templateUrl: 'build/pages/chat/chat.html',
})

export class ChatPage {

  private socketHost: string = "http://localhost:3700";
  private messages: string[] = [];
  private zone: NgZone = null;
  private chatBox: string = null;
  private socket: any = null;

  constructor(http: Http) {
    this.messages = [];
    this.zone = new NgZone({ enableLongStackTrace: false });
    //let url = this.socketHost + "/fetch";
    let url = this.socketHost;
    http.get(url).subscribe((success) => {
      var data = success.json();
      for (var i = 0; i < data.length; i++) {
        this.messages.push(data[i].message);
      }
    }, (error) => {
      console.log(JSON.stringify(error));
    });
    this.chatBox = "";


    this.socket = io(this.socketHost);
    this.socket.on("chat_message", (msg) => {
      this.zone.run(() => {
        this.messages.push(msg);
      });
    });
  }

  send(message) {
    if (message && message != "") {
      this.socket.emit("chat_message", message);
    }
    this.chatBox = "";
  }
}

html

<ion-navbar *navbar>
    <ion-title>
        Chat
    </ion-title>
</ion-navbar>

<ion-content class="home">
    <ion-list>
        <ion-item *ngFor="let message of messages">{{message}}</ion-item>
    </ion-list>
</ion-content>

<ion-footer-bar>
    <ion-input>
        <input type="text" [(ngModel)]="chatBox" placeholder="Message..." />
        <button (click)="send(chatBox)">Send</button>
    </ion-input>
</ion-footer-bar>

index.html

<script src="/socket.io/socket.io.js"></script>

SERVER
Java

import com.corundumstudio.socketio.AckRequest;
import com.corundumstudio.socketio.Configuration;
import com.corundumstudio.socketio.SocketIOClient;
import com.corundumstudio.socketio.SocketIOServer;
import com.corundumstudio.socketio.listener.ConnectListener;
import com.corundumstudio.socketio.listener.DataListener;
import com.corundumstudio.socketio.listener.DisconnectListener;

public class Server {

    public static void main(String[] args) {
        Configuration config = new Configuration();
        config.setHostname("localhost");
        config.setPort(3700);
        final SocketIOServer server = new SocketIOServer(config);
        server.addConnectListener(new ConnectListener() {
            @Override
            public void onConnect(SocketIOClient client) {
                System.out.println("onConnected");
                client.sendEvent("message", new Message("", "Welcome to the chat!"));
            }
        });
        server.addDisconnectListener(new DisconnectListener() {
            @Override
            public void onDisconnect(SocketIOClient client) {
                System.out.println("onDisconnected");
            }
        });
        server.addEventListener("send", Message.class, new DataListener<Message>() {

            @Override
            public void onData(SocketIOClient client, Message data, AckRequest ackSender) throws Exception {
                System.out.println("onSend: " + data.toString());
                server.getBroadcastOperations().sendEvent("message", data);
            }
        });
        System.out.println("Starting server...");
        server.start();
        System.out.println("Server started");

    }
}

Posts: 2

Participants: 1

Read full topic