Socket.io在Angular4上不起作用

Question

我正在使用Angular和Express構建一個項目，並且希望集成Socket.io進行聊天。 問題在於它似乎根本不起作用。 我執行了命令

npm install socket.io --save

這是我的Express index.js文件：

// Define variables
const express = require('express');
const app = express();
var http = require('http');
var server = http.createServer(app);


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

io.on('connection',(socket)=>{
    console.log("User connected");
});


// Use the /dist directory
app.use(express.static(__dirname + '/dist'));

// Catch all other invalid routes
app.all('*', function(req,res){
    res.status(200).sendFile(__dirname + '/dist/index.html');
});

// Start the server
app.listen(3000, function(){
  console.log('listening on *:3000');
});

它甚至沒有控制台日志“用戶已連接”。 這是我稱之為Socket的Angular組件上的代碼：

import { Component, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { UsuariosService } from '../../services/usuarios.service';
import { Usuario } from '../registro/usuario';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { Mensaje } from './mensaje';
import * as io from 'socket.io-client';

@Component({
    selector: 'chat',
    templateUrl: './chat.component.html',
    providers: [UsuariosService]
})
export class ChatComponent{

    public usuario:Usuario;
    public amigo:Usuario;
    public mensajes:Mensaje[];
    public texto:string;
    private socket;

    constructor(
        public dialogRef: MatDialogRef<ChatComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any,
        private _usuariosService: UsuariosService,
        public snackBar:MatSnackBar,
        public _router:Router,
    ){
        this.usuario = data.usuario;
        this.amigo = data.amigo;
        this.mensajes = new Array();
        this.texto = "";
        this.socket = io();
    }

Answer 1

您必須安裝npm install socket.io-client npm install @ types / socket.io-client，除此之外，您還必須初始化this.socket = io（environment.ws_url），其中this.socket = environment.ws_url表示您的端點websocket或使用socket = new WebSocket（environment.ws_url）並使用this.socket.onmessage =（me：any）=> {const data = JSON.parse（me.data）; this.files.push（data）; }; `

問候