Day02：Send Event(发送事件)

全文同步於个人 Docusaurus Blog

在上一章中，已将 client 端和 server 端进行连线，接下来我们需要开始，让两端互相发送讯息。

Server Send Message(服务器端送出讯息)

首先，我们在 server.js 使用之前建立的 connection() 撰写要发出的讯息：

// server.js
io.on('connection', (socket) => {
  // ...
  socket.emit('hello-client', 'This is Server send message.');
});

因为命名的 event 为 hello-client，所以接收讯息的 client.js 也必须使用相同命名。

// client.js
socket.on('hello-client', (server) => {
  console.log(`Client Receive：${server}`);
});

在 server 端发送的 message 透过参数向 client 端传，client 端接收後再印出来，现在启动 terminal 运行 yarn dev 来看看页面是否如预期结果。

从页面的结果来看，讯息的发送和接收都没问题，第一步完成。

Client Send Message(客户端送出讯息)

但最终的结果，是要求两端都能接收和发送，所以接下来需要反向操作，由 client 端传给 server 端。

// client.js
socket.on('hello-client', (server) => {
  // ...
  socket.emit('hello-server', 'This is Client send message.');
});

// server.js
io.on('connection', (socket) => {
  // ...
  socket.on('hello-server', (client) => {
    console.log(`Server Receive：${client}`);
  });
});

写法上基本一致，透过 emit() 来送出讯息，再透过 on() 来监听接收讯息。

同样的，到 terminal 来检查看看运行的结果：

终端机正常显示出，在 client.js 输入的讯息，代表 server 端可以正常接收，到此完成两端的发送和接收讯息的事件。