Files
freeCodeCamp/curriculum/challenges/chinese/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md
Oliver Eyton-Williams ee1e8abd87 feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-12 19:31:00 -07:00

3.0 KiB
Raw Blame History

id, title, challengeType, forumTopicId, dashedName
id title challengeType forumTopicId dashedName
589fc831f9fc0f352b528e75 通过 Emitting 通信 2 301550 communicate-by-emitting

--description--

Emit 是你会用到的,最常见的通信方式。如果我们从服务器发送信息给 'io',就相当于把事件的名称和数据发送给了所有处于连接状态的 socket。我们可以利用这个特性实现这样的功能只要有新用户连接到服务器我们就可以把目前连接的总用户数发给所有已连接的用户这样所有用户随时都可以看到实时的在线人数。

首先,我们需要在监听连接的地方之前添加一个用于追踪用户数的变量:

let currentUsers = 0;

然后,只要有人连接到服务器,我们需要在发出用户数量之前先给这个变量加 1

++currentUsers;

最后在监听连接的地方发出emit该事件即可。这个事件应命名为 'user count',且数据应该为 currentUsers

io.emit('user count', currentUsers);

接下来,我们还需要让客户端监听从服务端发出的事件。为此,我们还是需要用到 on 这个方法:

socket.on('user count', function(data) {
  console.log(data);
});

现在你可以尝试启动你的 app 并登录,你会看到在客户端的控制台打印出了 1这就表示目前连接到服务器的用户数为 1。你可以试着通过打开多个 app 来验证数量是否会增加。

完成上述要求后,你可以在下方提交你的页面链接。如果你遇到了问题,可以参考 这里 的答案。

--hints--

应定义 currentUsers。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/server.js').then(
    (data) => {
      assert.match(
        data,
        /currentUsers/gi,
        'You should have variable currentUsers defined'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

服务器应在有新的连接时 emit 当前用户数量。

(getUserInput) =>
  $.get(getUserInput('url') + '/_api/server.js').then(
    (data) => {
      assert.match(
        data,
        /io.emit.*('|")user count('|").*currentUsers/gi,
        'You should emit "user count" with data currentUsers'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

客户端应监听 'user count' 事件。

(getUserInput) =>
  $.get(getUserInput('url') + '/public/client.js').then(
    (data) => {
      assert.match(
        data,
        /socket.on.*('|")user count('|")/gi,
        'Your client should be connection to server with the connection defined as socket'
      );
    },
    (xhr) => {
      throw new Error(xhr.statusText);
    }
  );

--solutions--

/**
  Backend challenges don't need solutions, 
  because they would need to be tested against a full working project. 
  Please check our contributing guidelines to learn more.
*/