socket.io 和 reactjs 实现即时通讯（2）

目的：解释说明当在侧边菜单中选中一个 chat 后，该 chat 是如何变为当前 chat 的。以及当客户发送一条消息后，这条消息是如何一步一步显示在它应该的位置上的。

1.当客户单击侧边 chat 列表中的一个 chat 时，就会调用 setActiveChat 方法同时将该 chat 对象作为参数传入

2. setActiveChat 方法负责将 state 中的 activeChat 设置为该 chat

react 会监视 state 的变化，一旦发生变化就会根据 state 升级界面

这样我们就将该 chat 设置为 activeChat

我们看一看是如何发送消息的。

当客户在输入框中输入一条消息后按下回车，就会发送消息触发 onSubmit 方法

同时也会在 onChange 方法中把 state 中 message 赋值为客户的输入值

在 handleSubmit 会调用 sendMessage 方法，同时清空 message 值

sendMessage 会调用其父级组件(ChatContainer.js)的 sendMessage 方法。 有关 react 的基础知识我在这里就不做过多赘述了。大家感兴趣可以自己找些资料学习学习。

在父级（ChatContainer.js）sendMessage 方法中会发送 socket（MESSAGE_SENT?） 到服务端

如图中的高亮显示内容

那么我们来看一看在服务端是如何解决 MESSAGE_SENT 这个事件的。这里有些小技巧，我尝试给大家解释一下。

我们在?SocketManager.js 首先设置一个变量他负责接收一个函数作为值。

再看一看?SocketManager.js 这段代码，其实我们早在客户连接到 socket 就埋下了伏笔。sendMessageToChatFromUser 接受一个 sendMessageToChat(username) 返回的函数。在 js 函数可以作为参数和返回值，这就是 js 的高阶函数。高阶函数听起来高大上。其实就是函数是一等公民，可以作为参数和返回值罢了。

巧妙之处，就是在于我们用高阶函数，即可以在调用 sendMessageToChatFromUser 把客户名（username）事前放入的函数以备用，这样我们便可以给该客户发送消息。如何我们将 chatid 信息加入到发送事件中${MESSAGE_RECIEVED}-${chatId} 中，这样用户端接受到这条消息时，就会知道您是往哪个 chat 发消息，还有 sender 是谁发的 message 消息体。

回到用户端，我们在 增加 addChat 时就同时注册监听两个事件一个是接受消息一个是客户输入消息，大家注意到他们都带有chatId 作为标识。

接受到服务器端发的消息，便可以对其解决，将该消息放到其所在的chat（通过事件的ChatId来判断）而后便可显示出来。

今天就到这里，希望我把以上内容解释清楚，稍后我会分享视频到优酷。到时候，我会一步一步演示如何建立一个 IM 应用。