Socket.io 不适用于 Angular4答案

【问题标题】：Socket.io not working on Angular4Socket.io 不适用于 Angular4
【发布时间】：2018-05-28 15:01:02
【问题描述】：

我正在使用 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();
    }

【问题讨论】：

我希望这可以帮助stackoverflow.com/questions/47161589/…

标签： javascript angular express socket.io

【解决方案1】：

您必须安装 npm install socket.io-client npm install @types/socket.io-client 并且除此之外你必须初始化 this.socket = io(environment.ws_url) 其中 this.socket = environment.ws_url 它 s 表示您的 websocket 端点或使用 socket = new WebSocket(environment.ws_url) 并使用 this.socket.onmessage =（我：任何）=> { 常量数据 = JSON.parse(me.data); this.files.push(data); }; `

问候

【讨论】：