在服務器上偵聽客戶端發出的套接字

Question

我正在嘗試在我的Angular / Node應用中學習socket.io。

我會在有角度的一側發出一個事件，然后在后端監聽它。

在我的組件文件中：

import { MatTableDataSource } from '@angular/material';
import { AjouttextService } from '../ajouttext.service';
import { DataSource } from "@angular/cdk/collections";
import { Observable } from "rxjs/Observable";
import { nomchamp } from '../model';
import * as io from "socket.io-client";

@Component({
  selector: 'app-datatable',
  templateUrl: './datatable.component.html',
  styleUrls: ['./datatable.component.css']
})
export class DatatableComponent implements OnInit {

  constructor(private dataService: AjouttextService) { }
  data = [];
  url = 'http://localhost:8080';
  private socket = io.connect(this.url);

  displayedColumns = ['text'];
  dataSource = new UserDataSource(this.dataService);
  ;

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
  }
  ngOnInit() {
    this.socket.emit('save-message', { room: "hello" });
  }
}

Angular中的Emit事件設置為OnInit因此它在所有情況下都應該發出一個事件，而我的組件由app.component調用。

然后在服務器端，我將on 'save-message'事件on打印console.log

var http = require("http");
var admin = require('firebase-admin');
var firebase = require("firebase");
var express = require("express");
var app = express();
var bodyParser = require("body-parser");
var port = process.env.app_port || 8080; // set our port
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
var server = app.listen(port);
var io = require("socket.io")(server);
var routerProj = require("./routes/routes");
app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,*");
  next();
});
var config = {
  ...Config...
};
firebase.initializeApp(config);


var serviceAccount = require("./ServiceAcountKey.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://datatable-18f93.firebaseio.com"
});
app.use("/v1", routerProj, function (req) {
  //Create HTTP server and listen on port 8000 for requests


});
// Print URL for accessing server
console.log("Server running at http://127.0.0.1:8080/");
io.on("connection", function (socket) {
  console.log("user connected !");
});
io.on('save-message', function (socket) {
  console.log("user saved message");
});

當我運行服務器時，僅連接事件起作用。 我在控制台中獲得了“用戶連接”，但沒有“用戶保存的消息”

我期望什么？

客戶端運行應用程序（DatatableComponent組件）時，在服務器控制台上打印user saved message

Answer 1

嘗試將服務器端代碼修改為：

io.on('connection', function (socket) {
  console.log('user connected !');
  socket.on('save-message', function (socket) {
    console.log('user saved message');
  });
});

在socket對象上注冊消息監聽器，而不是在初始連接時收到的io上注冊消息監聽器。