温馨提示:文本由机器自动转译,部分词句存在误差,以视频为准
00:00
大家好,在上节课我们完成了啊,简单的数据的双向通讯,那么这一课开始写我们的聊天室,那这节课呢,我先把聊天室的页面给整合进来啊,那当然我们为了练习这个是很简单的一个页面,那这个我们就不要了啊,把这个给删掉。然后找到我们准备好的这个页面啊,这是给大家准备好的这个静态页面,我们把这些静态资源啊,这些都是静态资源,你看像这个GS啊,CSS以及这个图片啊,以及这个啊啊,我们直接复制一下,复制一下呢,放到我们的这个public目录下就可以了啊。好,放进来之后,那我们来启动一下我们的服务,看能不能运行啊,因为我们的服务端啊,这里配置了静态目录是public,所以如果public有indext或者呃,其他的这个index相关的这个文件的话,它会自己打开的啊,那我们来启动一下这个。So,好使用这个node来启动啊。
01:02
启动之后,我们在这个。啊,端口来访问一下可以看到啊,聊天页面已经有了,那这个就是我们这个啊项目里面的这个聊天页面啊,简单的给大家介绍一下这个聊天页面。首先是这个啊,一个h timel这个页面啊,H time呢,它有两个部分,它上面有一个呃,加入聊天室这个部分,哎,只不过它是一个隐藏的对吧,那下面呢,是一个聊天的这个部分,就是有呃有两个页面嘛,相当于是写在一块了,然后通过这个style来控制它的显示和隐藏,一开始在没有加入这个聊天室的时候,会显示一个加入聊天室的一个选项,然后我们输入昵称。我们把这个给剪切一下啊。等会儿啊。只剪切这一个样式啊。然后放到下面的啊,这个聊天室的这个,让聊天的这个隐藏,我们来看一看这个登录的这个页面。来刷新一下啊,这个就是一开始我们没有加入聊天室之前啊,显示这个,然后我们输入昵称,选择头像来之后加入聊天室啊,这个呢是我们的atime部分。
02:10
嗯,CSS呢我们就不说了,然后是这几个图片,接着是这个GS,我们把GS呢写到了这个index GS。那这里面呢,呃,写好了一些方法,比如说显示这个错误消息的啊,选择这个头像的,然后以及这个加入这个聊天室。啊,然后是这个发送消息。账号是呃,负责显示消息的,以及当有一个新的消息之后,让聊天的区域滚动到底部啊,大概有这么几个方法啊。好,那我们来看一看啊,这个就是啊,提示这个错误的,显示错误消息的那个函数。那接下来我们再来看一看这个,输入我们的这个昵称,然后选择头像就可以加入到聊天室,哎,当然这个是通过GS来控制这两个啊,模块的一个显示啊,一个和隐藏,那进来这个聊天室之后呢,我们可以在这里诶输入聊天内容,然后点击发送或者按回收键都可以发送消息啊,那当然这个都是呃,GS的一个特效,一个效果,我们并没有和啊,我们的这个web socket啊,我和我们的这个呃服务器进行连接啊,都是在GS端实现的啊,这是我提前准备好的一个页面,那我们就准备用这个页面,然后配合我们的服务端来完成这个聊天式的这个功能啊,那这节课呢,我们就呃先把这个页面准备好。
03:33
那这节课先到这里。
我来说两句