SocketIO 不会触发第一个客户端事件答案

【问题标题】：SocketIO dont fire first client eventsSocketIO 不会触发第一个客户端事件
【发布时间】：2017-11-23 22:34:16
【问题描述】：

我正在构建一个聊天应用程序。问题是，socket.io 在第一个客户端上触发时不会 emitkeypress 事件。

我用Ionic 3 & Angular 5 构建了这个

Here's“错误”

我的观点.html

 <p *ngIf="typing == true">... is typing</p>
 <ion-item no-lines>
   <ion-input
       type="text"
       placeholder="Message"
       [(ngModel)]="message"
       (keypress)="userIsTyping()">
   </ion-input>
 </ion-item>

我的观点.ts

userIsTyping() {
  this.socket.emit('typing');
  this.socket.on("updateTyping", (data) => {
    console.log('typingInSocket = ' + data.isTyping);
    this.typing = data.isTyping;
  });
  console.log('typing = ' + this.typing);

我的 server.js

io.on('connection', (socket) => {
  socket.on('typing', () => {
    socket.broadcast.emit('updateTyping', {
      isTyping: true
    });
    setTimeout(() => {
      socket.broadcast.emit('updateTyping', {
        isTyping: false
      });
    }, 2000);
  });

你有什么解决办法吗？谢谢你们！

【问题讨论】：

如果点击进入每个屏幕的输入框，不输入任何内容，然后回到第一个，是否有效？在我看来，除非您将焦点放在窗口中，否则客户端 socket.io 不会连接。我觉得奇怪的是typing=false 出现在左侧窗口中而不是右侧。我也觉得这很奇怪，因为我认为到目前为止还没有按键
@MattFletcher "typing=false" 出现在第一个按键上，gif 跳过 1 秒的开始 :x 我希望这只是一个窗口焦点问题，但这不是问题。我过去一整天都没有解决办法，我很难过
哦，我刚刚意识到它是什么......

标签： node.js angular typescript socket.io ionic3

【解决方案1】：

好的，问题是您将如何定义套接字侦听器。您正在为this.socket.on("updateTyping") inside 设置事件侦听器，该代码块仅在您开始输入后才运行。所以每次你开始输入时，你创建一个新的重复事件监听器。但是，因为它仅在您开始输入时定义，所以“正在输入...”在您输入至少一个字符之前不会显示，此时它会开始收听。

答案基本上是将套接字侦听器移到userIsTyping() 函数之外。

this.socket.on("updateTyping", (data) => {
  console.log('typingInSocket = ' + data.isTyping);
  this.typing = data.isTyping;
});

userIsTyping() {
  this.socket.emit('typing');
}

【讨论】：