![](/img/trans.png)
[英]How to show active userlist in chat application using angular.js , socket.io, node.js
[英]Angular Chat on Socket.io and Node.js
我想用 Angular 和 Socket.io 写一个聊天。 一切都在本地机器上运行。 但是在远程 Node.js 上,它不处理请求并且不连接到 Socket,尽管我通过 SSH 运行它。 也许我做错了什么? 我是新手。 请帮忙。 我已经坐了 10 个小时。 我会说更多,也许这很重要。 当我从 localhost:3000 上的远程站点打开 Socket 时,一切都像在本地机器上一样运行(尽管这很合乎逻辑)。
服务器部分
const cors = require('cors');
const express = require('express');
const app = express();
const server = require('http').createServer(app);
server.listen(3000);
const io = require('socket.io')(server);
app.use(cors());
let connections = [];
io.on('connection', (socket) => {
connections.push(socket);
console.log('Connect');
console.log(connections.length);
socket.on('disconnect', (data) => {
connections.splice(connections.indexOf(socket), 1);
console.log('Disconnect');
console.log(connections.length);
})
socket.on('send mess', (obj) => {
console.log(obj);
io.sockets.emit('add mess', obj);
})
});
角度服务
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, Subscriber } from 'rxjs';
import * as io from 'socket.io-client';
import * as $ from 'jquery';
@Injectable({
providedIn: 'root'
})
export class WhiteServiceService {
socket: any;
readonly url: string = 'ws://whitefox.website:3000/';
constructor(private http: HttpClient) {
this.socket = io(this.url);
}
postMessage(message: {}) {
this.socket.emit('send mess', message);
}
white() {
this.socket.on('add mess', (data) => {
$('ul').append('<li>'+data.name +': ' + data.message + '</li><br>');
})
}
}```
角客户端
import { Component, OnInit } from '@angular/core';
import { FormBuilder, Validators } from '@angular/forms';
import { WhiteServiceService } from '../white-service.service';
import * as $ from 'jquery';
@Component({
selector: 'app-chat',
templateUrl: './chat.component.html',
styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
messageValue: string = "Hi";
number: number;
constructor(private fb: FormBuilder, private sendMessageServise: WhiteServiceService) { }
messageForm = this.fb.group({
name: ['name', Validators.required],
message: ['message', Validators.required]
})
sendMessage() {
this.messageValue = null;
this.sendMessageServise.postMessage(this.messageForm.value);
}
ngOnInit() {
this.sendMessageServise.white();
}
}
可能你在 Server.js 中遗漏了它
const io = require('socket.io')(server, {
cors: {
origins: ['*']
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.