在 Angular 页面上使用不同的服务器答案

【问题标题】：Use a different server on a page Angular在 Angular 页面上使用不同的服务器
【发布时间】：2019-06-17 15:00:48
【问题描述】：

我正在尝试在我的 Angular / NodeJS 网站上实现与视图的聊天。

website 部署在运行在端口 4200 上的服务器上，backend 运行在 8000 上，而目前chat socket.io 模板运行在 3000 上。

我已经详细遵循了 socket.io 的官方聊天教程，所以我有一个可以在 3000 端口上运行的功能聊天页面，但是如何将它实现到 Angular 组件？

到目前为止，这是我的代码：

server.js:

const app = require('express')();
var http = require('http').Server(app);
var http2 = require('http').Server(app);
var io = require('socket.io')(http2);

http.listen(8000, function(){
  console.log('listening on *:8000');
});
http2.listen(3000, function(){
  console.log('listening on *:3000');
});

const home = require('./home.js');
const chat = require('./chat.js');

// SOCKET.IO for testing purpose, following the tutorial
app.get('/', function(req, res){
  res.sendFile(__dirname + '/socket.html');  
});

io.on('connection', function(socket){
  ...
});

chat.component.html:

<!doctype html>
<html> 
<body>

...

<div class="bottom">
  <form action="">
    <input id="m" class="messageInput" autocomplete="off"/>
    <button type="button" class="btn btn-primary btn-lg btn-block">SEND</button>
  </form>
</div>

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
    $(function () {
      var socket = io();
      $('form').submit(function(e){
        e.preventDefault(); // prevents page reloading
        socket.emit('chat message', $('#m').val());
      $('#m').val('');
        return false;
      });
      socket.on('chat message', function(msg){
        $('#messages').append($('<li>').text(msg));
      });
    });
  </script>
</body>
</html>

如果不通过路由（app.get('/', function(req, res){ res.sendFile(__dirname + '/socket.html') });

我能做什么？谢谢！很抱歉成为菜鸟：p

【问题讨论】：

有人知道吗？ :)

标签： node.js angular socket.io

【解决方案1】：

Socket.io 与客户端不同，称为 socket.io-client。您需要使用：

npm install socket.io-client

好吧，Martin，您不需要在 html 中显式链接脚本文件。您只需要在其 typescript 文件中导入 socket.io-client 变量。

import * as io from 'socket.io-client'. //And then connect using
try {
        this._socket = io.connect(socket.io_port_you_are_using_in_server.js)
    }
    catch (e) {
        console.log('error')
    }

现在您可以在任何需要的地方使用 this._socket，就像在 server.js 中所做的那样。 7 个月前，我还使用 MEAN 堆栈创建了一个像您这样的应用程序，但我更喜欢使用服务，因为我必须在 3 个以上的组件中使用聊天功能。我给你一些可能对你有帮助的示例代码。

 joinRoom(room: string, handler: string): Observable<any> {

        this._socket.emit('join', { 'room': room, 'handler': handler });
    setTimeout(()=>{
        console.log(this._socket.id)
    },10)
    let observable = new Observable((observer) => {
        this._socket.on('new user', (data) => {
            observer.next(data);
        })
    })
    return observable;
}
leaveRoom(room: string) {
    this._socket.emit('leave', room);
    this._socket.removeAllListeners()
}
 getMessages(): Observable<any> {
    let observable = new Observable((observer) => {
        this._socket.on('get message', (data) => {
            observer.next(data);
        })
    })
    return observable;
}

只需订阅服务并使用绑定在模板上显示消息。

//create array of received msgs
received: any[] = [];
//And in ngOnInit lifecycle hook:
    this._chatService.getMessages().subscribe((data) => {
          this.received.push(data.msg )

现在您可以在模板中使用 *ngFor 来显示消息。

<p *ngFor="let msg of received">msg</p>

您可以根据需要自定义代码。

祝你好运！

【讨论】：

非常感谢您的回答，这正是我所缺少的！
还有其他非常有用的信息！
很高兴听到那个家伙。我添加了更多代码来帮助您在模板上显示消息，希望它对您的项目有更多帮助。