用户登录

下面去准备一下聊天功能的客户端,打开 index 这个模板文件,在它的主体里面,在这个按钮的上面添加一个文本框,在这个文本框里可以输入要发送的 message 消息。元素上面添加一个 id ,名字是 message,这样在代码里可以使用这个 id 得到用户在这个文本框里输入的具体的值。这个按钮文字可以换成 Submit。

然后再添加一个显示 message 内容地方,一组 div 元素,上面加上一个 id,值可以设置成 message-list。

在这个文档的脚本里面,先定义一个函数,这个函数的作用去创建一个段落元素,然后把收到的 message 消息的值添加到这个 id 是 message-list 的元素里面。

函数的名字可以叫它 newMessage,用一个箭头函数,支持一个 data 参数,在函数里面,添加一个 p ,它的值用一下 document.createElement 创建一个 p 元素。下面再添加一个 text,它的值用一下 document.createTextNode,里面的值是 data 参数的值。

再把创建的 text 节点放在上面创建的 p 元素里面,用一下 p 上的 appendChild 方法,把 text 交给这个方法。

最后再把这个 p 元素添加到 message-list 元素里面,用 document.querySelector ,找到页面上的 #message-list ,然后用一下 appendChild 方法,把 p 元素添加到这个 #message-list 里面。

Socket

点击了页面上的 Submit 按钮以后,先想办法得到 message 这个文本框里的值,添加一个 message,用一下 document.querySelector ,得到 #message 元素。

下面用 socket 上的 emit 发送一条消息,名字叫 message,具体的值是 message 元素里的 value 属性的值,这个属性的值就是用户在文本框里输入的内容。给这个 emit 再提供一个回调方法,支持一个 data 参数,在这个方法里,可以用一下刚刚定义的 newMessage 函数,把 data 的值交给这个函数。

在 WebSocket 服务端那里,收到了客户端发送的 message 消息,会把这个消息再发送给客户端。

然后在客户端这里再监听一下 message 消息,用的是 socket 上的 on 方法,消息的名字叫 message,提供一个回调方法,方法支持一个 data 参数,方法里面用一下 newMessage ,把 data 交给它。

预览

回到浏览器,再预览一下,这里我已经准备好了三个浏览器窗口。先在其中的一个窗口上的文本框里输入点内容,然后点击 Submit 按钮。这会发送一条 message 消息。服务端那里收到了 message 消息,会把这个 message 消息发送回来,客户端收到了这个 message 消息,就会把它放在页面上显示出来。

另外服务端还会广播一条 message 消息,这条消息里面会加上客户端的 id 号,广播的消息在其它所有的客户端那里都可以收到。客户端收到了 message 消息,会把它放在页面上显示出来。

现在有个小问题,就是在发送了消息以后,文本框里仍然会显示已经发送的消息。

可以这样修改一下,在 index 模板里面,点击了按钮以后,设置一下 message 元素上的 value 的值,把它设置成一个空白。然后再回到浏览器试一下。

在一个浏览器窗口的这个文本框里输入一条信息,发送一下。这次会清空文本框里的内容。

再到另外一个浏览器窗口发送一条消息,自己收到了这条消息,其它的客户端也会收到服务端广播的消息。

创建一个实时聊天功能(客户端)《 企业应用架构:实时通信 》

统计

12489
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点