客户端

Question

我正在尝试使用Ionic2（Angular2）创建聊天应用。我有一个 Java Server 和 Ionic 2 Client 。

我收到以下错误：

ORIGINAL EXCEPTION：ReferenceError：未定义io

有什么建议吗？

客户端

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>

服务器

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");

    }
}

更新

我将以下内容添加到index.html，我不会再出现任何错误：

<script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>

但它只是挂起。在Firebug中，我可以看到以下请求只是挂起：

GET http://localhost:3700/

以下内容在服务器控制台中打印：

onConnected

当服务器没有运行时，以下请求按预期超时，但是当服务器运行时，请求确实返回，但返回null：

GET http://localhost:3700/socket.io/?EIO=3&transport=...LRQn9sx&sid=53081e79-81f3-4fc0-8fb7-17c8673938ca        
200 OK
        27ms

因此，我认为我的服务器代码或客户端与服务器之间的通信是错误的。

有什么想法吗？

Answer 1

在您的Angular应用中，您正在聆听并发出chat_message。

在您的Java服务器中，您正在聆听send并发出message。

这不会加起来，是吗？

原始例外：ReferenceError：未定义io

客户端

HTML

服务器

1 个答案: