Question

我正在尝试对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>

如果不通过路由访问{'{1}}

，我无法使HTML页面上的聊天'模块'工作正常

我该怎么办？谢谢！很抱歉成为菜鸟：p

Answer 1

Socket.io在客户端方面有所不同，称为socket.io-client。您需要使用以下方法获取它：

npm install socket.io-client

好吧，马丁，您不需要在html中显式链接脚本文件。您只需要在其打字稿文件中导入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')
    }

现在，您可以像在server.js中一样在需要的地方使用this._socket。 7个月前，我还使用MEAN stack创建了一个像您一样的应用程序，但是我更喜欢使用服务，因为我必须在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>

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

伙计，祝你好运！

在页面Angular上使用其他服务器

1 个答案: