「服务器」教你使用Websockets和Go编程语言构建实时聊天应用程序( 三 )
文章图片
文章图片
接下来我们创建一个函数处理传入的 WebSocket 连接 。首先我们使用升级的 "Upgrade()" 方法改变初始的 GET 请求 ， 使之成为完全的 WebSocket 。如果发生错误 ， 记录下来 ， 但不退出 。同时注意 defer 语句 ， 它通知 Go 在函数返回的时候关闭 WebSocket 。这是个不错的方法 ， 它为我们节省了不少可能出现在不同分支中返回函数前的 "Close()" 语句 。
文章图片
文章图片
接下来把新的客户端添加到全局的 "clients" 映射表中进行注册 ， 这个映射表在早先已经创建了 。
文章图片
文章图片
最后一步是一个无限循环 ， 它一直等待着要写入 WebSocket 的新消息 ， 将其从 JSON 反序列化为 Message 对象然后送入广播频道 。然而 "handleMessages()" Go 程序就能把它送给连接中的其它客户端 。
如果从 socket 中读取数据有误 ， 我们假设客户端已经因为某种原因断开 。我们记录错误并从全局的 “clients” 映射表里删除该客户端 ， 这样一来 ， 我们不会继续尝试与其通信 。
另外 ， HTTP 路由处理函数已经被作为 goroutines 运行 。这使得 HTTP 服务器无需等待另一个连接完成 ， 就能处理多个传入连接 。
文章图片
文章图片
服务器的最后一部分是 "handleMessages()"函数 。这是一个简单循环 ， 从“broadcast”中连续读取数据 ， 然后通过各自的 WebSocket 连接将消息传播到所以客户端 。同样 ， 如果写入 Websocket 时出现错误 ， 我们将关闭连接 ， 并将其从“clients” 映射中删除 。
文章图片
文章图片
构建客户端
如果没有漂亮的 UI ， 聊天应用程序将无法完成 。我们需要使用一些 HTML5 和 VueJS 来创建一个简单、干净的界面 ， 再利用一些诸如 Materialize CSS 和 EmojiOn 的库来生成一些样式和表情符号 。在“public”目录中 ， 创建一个名为“index.html”的新文件 。第一部分很基础 。为了美观 ， 我们也会放入一些样式表和字体 。“style.css”是自定义的样式表 ， 用于自定义一些内容 。
文章图片
文章图片
下一部分仅与接口相关 ， 其中只包含一些用于选择用户名、发送消息和显示新的聊天信息的字段 。与 VueJS 交互的细节超出本文的介绍范围 ， 你可阅读此文档了解更多 。
文章图片
文章图片
最后一步只需要导入所有需要的 JavaScript 库 ， 包括 Vue、EmojiOne、jQuery 和 Materialize 。我们需要 MD5 库获取来自 Gravatar 的头像 URL ， 这用 JavaScript 代码写出来就好理解了 。最后导入 "app.js" 。
推荐阅读
- 小贝贝议科技■国产手机厂商有可能使用华为麒麟芯片吗？
- @不同单位需要使用不同执法记录仪？
- 『科技圈』苹果为了卖货出“奇招”，白送 iPhone SE 使用权最高全价折扣
- 『消除器』助听器的声反馈消除，使用了什么样的原理？
- ■新形势下传统企业破局重生林魔头教你从商业模式设计开始
- #麻辣西斯FFn1#关于华为手机混合使用不同供应商屏幕的原因分析
- 「」关于华为手机混合使用不同供应商屏幕的原因分析
- 『历史』科研工作者长期使用的这种方法，竟然也会错？
- 「」华为M6 8.4使用体验
- 「」什么是基础架构即代码和平台即代码？看完就清楚了