4-9.peerconnection-client界面实现

/那在前面的两节课中呢，我详细向你讲述了如何通过windows底层API开发windows程序。有了这个基础之后呢，今天我们就进入到peerconnectionclient端的原码分析阶段，首先我们来看看client端它的界面是如何实现的。实际上呢，client端的界面开发与我们前面介绍的过程啊，基本是类似的.

主要分成两大步，那第一大步呢就是通过自己创建的windows对象的。create方法创建界面，在这个过程中呢，包括三步对吧？第一步呢是注册窗口，第二步是创建窗口。第三步是显示窗口。

当窗口创建好之后呢.是对消息的处理。在一个while循环中，通过get message不停的获取消息。之后对消息进行转换，将消息分发给wndproc函数，在proc函数中呢，对消息做进一步的处理。对于client端来说呢，也是遵循这样一个步骤，万变不离其宗，

那接下来呢，我们看一下main window的create方法，做了哪些事情？
第一步呢，当然是注册窗口对吧？通过register window class这个方法，将窗口类注册到windows系统中。
第二步呢，是创建窗口调用的，是create window esw，
那第三步呢，就与我们前面介绍的有一些区别了，它会调用create child windows。来创建子窗口。也就是说，

在我们进行展示之前，先将所有的子窗口都创建出来。比如说button文本框列表等等，这些子窗口呢，都是在这个方法中创建出来的最后一步呢，是通过switch to connect UI。显示我们要展示的页面以上呢，就是create方法要完成的任务，

在这里啊，创建子窗口以及显示当前要展示的页面。是我们之前没有接触的，我在这里呢，做一下重点讲解好，首先我们来看一下创建子窗口，那对于创建子窗口来说呢？

它内部的逻辑非常简单，就是调用create child window来将一个个子窗口创建出来，比如说有label。有edit也就是文本框，有listbox等等。那我们再来看一下create child window里边儿又是怎么实现的？

对于这个函数来说呢，它内部的实现也非常简单。就是调用了一个系统的create window esw这个函数来创建子窗口，那在创建子窗口的时候呢，有一个重要参数，我们需要特别注意。就是父窗口参数，也就是说我们在创建子窗口的时候要告诉他它的父窗口是谁，这样他们才能建立这种逻辑关系，

当我们关闭父窗口的时候。副窗口就知道我下边有哪些子窗口，那这些子窗口呢，也同时要释放资源，所以我们在创建子窗口的时候呢，一定要注意这个参数要填对。好，这是创建子窗口。

那接下来我们再来了解一下switch to connect UI这个函数的具体实现，我们要弄清楚这个函数实现。首先，我们要知道一个原理，就是我们页面切换的真实情况，是我们有一个共同的父窗口，在不同的阶段呢，我们在父窗口里显示不同的子窗口。这样就达到了一个多页面的切换。

了解这个原理之后呢，我们再来看这个switch to connect UI就很容易理解它里边儿内容了，在这个函数中呢，主要有三条语句。那第一条语句呢，就是对用户列表页的布局。参数force的含义是我们用户列表布局好之后呢，并不显示出来，让它隐藏掉好第二条语句，非常简单，就是给UI设置一个状态。它当前的状态呢，是connect to server，也就是第一个连接服务器的那个页面。

实际UI是一个状态机，你显示不同页面的时候呢，它的状态会发生变化，那第三句呢，是对连接信令服务器页面的布局。当参数为true的时候呢，表示的是里边儿的子控件儿全部显示出来，通过这三条语句，我们就可以知道client端的两个页面已经布局好了。但是，对于用户列表这个子控件呢，它目前是隐藏的，而对于连接新的服务器的所有子控件都是显示的。通过这三步之后呢，我们就可以看到连接新令服务器的那个页面了，

接下来呢，我们分别再对layout peer list UI以及layout connect UI。这两个函数呢，做一下详细介绍，对于layout plis tui来说呢，它会对输入参数做一个判断。如果是show，它就将listbox这个子控件呢显示出来，如果是false呢，就将listbox这个子控件呢给它隐藏起来，非常简单。那对于layout connect UI也是类似的，如果参数show它就对这个页面中的所有子控件。进行一个展示，如果是flase呢，就对所有的子控件进行一个隐藏。

那之所以这里有一个for循环，是因为我们连接信令服务器时候使用的子控件呢比较多。比如，有输入新令服务器地址的窗口，有端口窗口有button，而对于用户列表页来说呢，只有一个子控件，就是listbox。所以在这里呢，可以看到一个负循环。而在上面那个页面儿中呢，没有这个for循环，这是它们之间的一个差别。

通过这些介绍啊，相信你现在已经对client端的界面儿是如何实现的？

已经非常清楚了，下面呢，我们再来看一下这些页面之间是如何切换的，那由于页面切换是一个非常复杂的过程，那这里呢，我就以这历史页面为例来做一下重点讲解。对于其他页面的切换呢，大家自己去看代码就OK了好，对于PR list这个页面来说呢，它切换的位置有很多。我们来一一看一下啊，那第一个呢？是与信令服务器建立连接成功之后，会从连接信令服务器的页面切换到peer list这个页面。

实际上，就是在收到新的服务器返回的新in这个消息之后呢？做这个页面的切换。这是第一个，那第二个情况呢？是当有其他用户连接到新的服务器之后，我们收到新用户的消息的时候，我们也要刷新一下peer list这个时候呢，实际也相当于做一次切换。也就是在收到新订服务器的peer connected这个消息之后，我们做一次切换好同样道理，当某个用户离开新订服务器之后。那有一个用户离开了，我们也要刷新一下peer list，也就是说在收到peer disconnect这个消息之后呢？我们要做一次切换。

第四个这个呢，相对复杂一些，这是当我们已经与另外一个用户进行音视频通讯的时候。在收到用户关闭连接消息的时候呢，我们会做一次切换，从音视频通话页面又返回到皮尔利斯的页面。好，最后一个呢，也是在音视频通话的时候，当我们按键盘左上角的esc键时，就会从音视频展示页面退回到p2 list页面。这时候呢，也会做一次切换。

好，那通过上面的介绍呢？我们可以发现切换到peer list这个页面的入口点还是非常多的，一共有五个点，对吧？一个是连接限定服务器成功的时候。一个是当其他用户连接到新六服务器的时候，一个是其他用户与新六服务器断开连接的时候。还有，当我们在音视频通话，对方断连的时候，以及在音视频通话，我们退出的时候。都会切换到peer list，那从这个过程中呢，

我们可以看到它还是蛮复杂的，但是对于client端这三个页面来说呢？只有peer list这个页面的切换是最为复杂的，而其他两个页面呢？相对就简单一些，这里呢，我已经将最复杂的这个向你做了详细的解释，对于其他页面的切换呢。你自己看一下代码就OK了，好以上呢，就是peerconnectionclient端页面展示的主要逻辑。那有了，以上这些知识，下节课我再带你阅读它的代码的时候，你就会觉得client端的实验其实还是蛮简单的。