Question

我想使用socket.io模块发送消息，我是新手使用它。我试图在我的Angular2 CLI + Node.js应用程序中运行socket.io，我收到以下错误：

TypeError：无法读取＆＃39; on＆＃39;未定义的在MessagesComponent.webpackJsonp.363.MessagesComponent.sendMessage （messages.component.ts：34）

我的代码有什么问题，如何连接并向socket.io服务器发送消息？

messages.component.html

<div class="stick" style="background-color:#F5F5F5;">
  <h5>Messages:</h5>

<ul>
<li *ngFor="let msg of msgs">
{{msg}}
</li>
</ul>

<input #mm/>
<button (click)="sendMessage(mm.value); mm.value=''">Send</button>
</div>

messages.component.ts

import { Component,Input,OnInit,Output,EventEmitter,HostListener,ElementRef, NgZone} from "@angular/core";

import * as sio from 'socket.io-client';
import { Observable } from 'rxjs/Observable';
@Component({

    selector: "messages",
    templateUrl: './messages.component.html'

})

export class MessagesComponent implements  OnInit{

             socket: SocketIOClient.Socket;


             private url = 'http://localhost:4200';


        constructor(private _zone: NgZone, public http: Http) {}




        ngOnInit() {


        }



              sendMessage(message){
                      this.socket.on('connect', function(data) {
                this.socket.emit('add-message', message);
                });
              }

              getMessages() {
                let observable = new Observable(observer => {
                  this.socket = io(this.url);
                  this.socket.on('message', (data) => {
                    observer.next(data);
                  });
                  return () => {
                    this.socket.disconnect();
                  };
                })
                return observable;
              }


}

www.ts

import { app } from '../app';
import * as http from 'http';




/**
 * Get port from environment and store in Express.
 */
const port = normalizePort(process.env.PORT || 3000);
app.set('port', port);

/**
 * Create HTTP server.
 */
const server = http.createServer(app);

let io = require('socket.io').listen(server);



io.on('connection', (socket) => {

  socket.on('disconnect', function(){
    console.log('user disconnected');
  });

  socket.on('add-message', (message) => {
    io.emit('message', {type:'new-message', text: message});
  });
});
/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

解决方案：

constructor(private _zone: NgZone, public http: Http) {
   this.socket = sio(this.url);
}
in your on callback use arrow function to preserve this keyword :

sendMessage(message){
    this.socket.on('connect', (data) => {
         this.socket.emit('add-message', message);
     });
}

Answer 1

你必须实例化你的套接字：

constructor(private _zone: NgZone, public http: Http) {
   this.socket = sio(this.url);
}

在on回调使用箭头功能中保留this关键字：

sendMessage(message){
    this.socket.on('connect', (data) => {
         this.socket.emit('add-message', message);
     });
}

Angular2 CLI Socket.io无法读取属性＆＃39; on＆＃39;未定义

1 个答案: