「服务器」教你使用Websockets和Go编程语言构建实时聊天应用程序( 四 )
文章图片
文章图片
然后在 "public" 目录下创建一个 "style.css" 文件 。其中会放入一些样式 。
文章图片
文章图片
客户端的最后一部分是 JavaScript 代码 。在 "public" 目录下创建文件 "app.js" 。
对于 VueJS 应用程序来说 ， 一开始都是创建新的 Vue 对象 。我们将它与 id 为 "#app" 的 div 绑定 。这会让 div 内的所有东西与 Vue 实现共享作用域 。下面定义一些变量 。
文章图片
文章图片
Vue 提供了一个叫 "created" 的属性 ， 这是一个函数 ， 会在 Vue 实例刚刚创建时调用 。这里非常适合对应用做一些设置工作 。在这个示例中我们希望创建一个新的 WebSocket 连接与服务器连接 ， 并创建一个处理器用于处理从服务器发送过来的消息 。我们把新的 WebSocket 对象保存在 "data" 属性的 "ws" 变量中 。
"addEventListener()"方法接受一个用于处理传入消息的函数 。我们期望所有消息都是 JSON 字符串 ， 以便统一解析为一个对象字面量 。然后我们可以用各个属性和 avater 头像一起组成漂亮的消息行 。"gravatarURL()" 方法会在后面详述 。我们用了一个叫 EmojiOne 的表情库来解析emoji 代码 。"toImage()" 方法会把 emoji 代码转换为实际的图片 。比如 ， 如果你输入 ":robot:" ， 它会被替换为一个机器人 emoji 表情图 。
文章图片
文章图片
"methods" 属性可以定义各种函数 ， 我们会在 VueJS 应用中使用这些函数 。"send"方法用于向服务器发送消息 。我们先确保消息不是空的 ， 然后把消息组织成一个对象 ， 再用"stringify"把它变成 JSON 字符串 ， 以便服务器能正确解析 。我们使用 jQuery 来处理传入消息中 HTML 和 JavaScript 中的特殊字符 ， 以防止各种类型的注入攻击 。
文章图片
文章图片
"join"函数会确保用户在发送消息前输入 email 地址和用户名 。一旦他们输入了这些信息 ， 我们将 joined 设置为 "true" ， 同时允许他们开始交谈 。同样 ， 我们会处理 HTML 和 JavaScript 的特殊字符 。
文章图片
文章图片
最后一个函数是一个很好的辅助函数 ， 用于从 Gravatar 获取头像 。URL 的最后一段需要用户的 email 地址的 MD5 编码 。MD5 是一种加密算法 ， 它能隐藏 email 地址同时还能让 email 地址作为一个唯一标识来使用 。
文章图片
文章图片
运行应用程序
要运行该应用程序 ， 请打开控制台窗口并确保进入应用程序的“src”目录中 ， 然后运行以下命令 。
文章图片
文章图片
接下来打开 Web 浏览器并导航到“http://localhost:8000”站点 。然后就会显示聊天屏幕 ， 你可以在聊天屏幕中输入电子邮件和用户名 。
推荐阅读
- 小贝贝议科技■国产手机厂商有可能使用华为麒麟芯片吗？
- @不同单位需要使用不同执法记录仪？
- 『科技圈』苹果为了卖货出“奇招”，白送 iPhone SE 使用权最高全价折扣
- 『消除器』助听器的声反馈消除，使用了什么样的原理？
- ■新形势下传统企业破局重生林魔头教你从商业模式设计开始
- #麻辣西斯FFn1#关于华为手机混合使用不同供应商屏幕的原因分析
- 「」关于华为手机混合使用不同供应商屏幕的原因分析
- 『历史』科研工作者长期使用的这种方法，竟然也会错？
- 「」华为M6 8.4使用体验
- 「」什么是基础架构即代码和平台即代码？看完就清楚了