Ionic 2 Chat

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?


I have the following code so far:


import { Component, NgZone } from '@angular/core';
import { Http } from "@angular/http";
declare var io;
//require ('io');
  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 = []; = 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++) {
    }, (error) => {
    this.chatBox = "";
    this.socket = io(this.socketHost);
    this.socket.on("chat_message", (msg) => { => {
  send(message) {
    if (message && message != "") {
      this.socket.emit("chat_message", message);
    this.chatBox = "";


<ion-navbar *navbar>
<ion-content class="home">
        <ion-item *ngFor="let message of messages">{{message}}</ion-item>
        <input type="text" [(ngModel)]="chatBox" placeholder="Message..." />
        <button (click)="send(chatBox)">Send</button>


<script src="/"></script>


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();
        final SocketIOServer server = new SocketIOServer(config);
        server.addConnectListener(new ConnectListener() {
            public void onConnect(SocketIOClient client) {
                client.sendEvent("message", new Message("", "Welcome to the chat!"));
        server.addDisconnectListener(new DisconnectListener() {
            public void onDisconnect(SocketIOClient client) {
        server.addEventListener("send", Message.class, new DataListener<Message>() {
            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...");
        System.out.println("Server started");

I add the following to index.html, and I don’t get any errors any more:

<script src=""></script>

But it just hangs. And in Firebug, I can see that the following request is just hanging:

GET http://localhost:3700/

The following is printed in the server console:


When the server is not running the following request times out as expected, but when the server is running, the request does return, but with a null response:

GET http://localhost:3700/
200 OK

So it suggests that my server code or the communication between client and server is wrong I think.

Any ideas?

So you’re using

Try this

npm install --save
typings install --global --save

Then in your class, you can do

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import * as sio from '';
  templateUrl: 'build/pages/home/home.html'
export class HomePage {
  public server = sio();
  constructor(public navCtrl: NavController) {
    this.server.on('connection',(socket)=> {
      console.log('User ' + + ' connected');

@mhartington: I wanted to try your piece of code with Ionic 3 and I always get this error - gotta a solution for this issue?

Runtime Error
Uncaught (in promise): TypeError: exists is not a function TypeError: exists is not a function at resolvePath (http://xxx/build/vendor.js:139706:9) at Server.serveClient (http://xxx/build/vendor.js:139712:25) at new Server (http://xxx/build/vendor.js:139651:8) at Server (http://xxx/build/vendor.js:139643:41) at new HomePage (http://xxx/build/main.js:61:23) at createClass (http://xxx/build/vendor.js:12516:20) at createDirectiveInstance (http://xxx/build/vendor.js:12363:37) at createViewNodes (http://xxx/build/vendor.js:13801:53) at createRootView (http://xxx/build/vendor.js:13691:5) at callWithDebugContext (http://xxx/build/vendor.js:15092:42)

Thnaks in advance!