原文地址:https://www.oschina.net/translate/build-a-realtime-chat-server-with-go-and-websockets?lang=chs&page=2#
如果没有漂亮的 UI,聊天应用程序将无法完成。 我们需要使用一些 HTML5 和 VueJS 来创建一个简单、干净的界面,再利用一些诸如 Materialize CSS 和 EmojiOn 的库来生成一些样式和表情符号。 在“public”目录中,创建一个名为“index.html”的新文件。
第一部分很基础。为了美观,我们也会放入一些样式表和字体。“style.css”是自定义的样式表,用于自定义一些内容。
Simple Chat
下一部分仅与接口相关,其中只包含一些用于选择用户名、发送消息和显示新的聊天信息的字段。与 VueJS 交互的细节超出本文的介绍范围,你可阅读此文档了解更多。
最后一步只需要导入所有需要的 JavaScript 库,包括 Vue、EmojiOne、jQuery 和 Materialize。我们需要 MD5 库获取来自 Gravatar 的头像 URL,这用 JavaScript 代码写出来就好理解了。最后导入 "app.js"。
然后在 "public" 目录下创建一个 "style.css" 文件。其中会放入一些样式。
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
#chat-messages {
min-height: 10vh;
height: 60vh;
width: 100%;
overflow-y: scroll;
}
客户端的最后一部分是 JavaScript 代码。在 "public" 目录下创建文件 "app.js"。
对于 VueJS 应用程序来说,一开始都是创建新的 Vue 对象。我们将它与 id 为 "#app" 的 div 绑定。这会让 div 内的所有东西与 Vue 实现共享作用域。下面定义一些变量。
new Vue({
el: '#app',
data: {
ws: null, // Our websocket
newMsg: '', // Holds new messages to be sent to the server
chatContent: '', // A running list of chat messages displayed on the screen
email: null, // Email address used for grabbing an avatar
username: null, // Our username
joined: false // True if email and username have been filled in
},
Vue 提供了一个叫 "created" 的属性,这是一个函数,会在 Vue 实例刚刚创建时调用。这里非常适合对应用做一些设置工作。在这个示例中我们希望创建一个新的 WebSocket 连接与服务器连接,并创建一个处理器用于处理从服务器发送过来的消息。我们把新的 WebSocket 对象保存在 "data" 属性的 "ws" 变量中。
"addEventListener()"方法接受一个用于处理传入消息的函数。我们期望所有消息都是 JSON 字符串,以便统一解析为一个对象字面量。然后我们可以用各个属性和 avater 头像一起组成漂亮的消息行。"gravatarURL()" 方法会在后面详述。我们用了一个叫 EmojiOne 的表情库来解析emoji 代码。"toImage()" 方法会把 emoji 代码转换为实际的图片。比如,如果你输入 ":robot:",它会被替换为一个机器人 emoji 表情图。
created: function() {
var self = this;
this.ws = new WebSocket('ws://' + window.location.host + '/ws');
this.ws.addEventListener('message', function(e) {
var msg = JSON.parse(e.data);
self.chatContent += ''
+ '' // Avatar
+ msg.username
+ ''
+ emojione.toImage(msg.message) + '
'; // Parse emojis
var element = document.getElementById('chat-messages');
element.scrollTop = element.scrollHeight; // Auto scroll to the bottom
});
},
"methods" 属性可以定义各种函数,我们会在 VueJS 应用中使用这些函数。"send"方法用于向服务器发送消息。我们先确保消息不是空的,然后把消息组织成一个对象,再用"stringify"把它变成 JSON 字符串,以便服务器能正确解析。我们使用 jQuery 来处理传入消息中 HTML 和 JavaScript 中的特殊字符,以防止各种类型的注入攻击。
methods: {
send: function () {
if (this.newMsg != '') {
this.ws.send(
JSON.stringify({
email: this.email,
username: this.username,
message: $('').html(this.newMsg).text() // Strip out html
}
));
this.newMsg = ''; // Reset newMsg
}
},
"join"函数会确保用户在发送消息前输入 email 地址和用户名。一旦他们输入了这些信息,我们将 joined 设置为 "true",同时允许他们开始交谈。同样,我们会处理 HTML 和 JavaScript 的特殊字符。
join: function () {
if (!this.email) {
Materialize.toast('You must enter an email', 2000);
return
}
if (!this.username) {
Materialize.toast('You must choose a username', 2000);
return
}
this.email = $('').html(this.email).text();
this.username = $('
').html(this.username).text();
this.joined = true;
},
最后一个函数是一个很好的辅助函数,用于从 Gravatar 获取头像。URL 的最后一段需要用户的 email 地址的 MD5 编码。MD5 是一种加密算法,它能隐藏 email 地址同时还能让 email 地址作为一个唯一标识来使用。
gravatarURL: function(email) {
return 'http://www.gravatar.com/avatar/' + CryptoJS.MD5(email);
}
}
});
要运行该应用程序,请打开控制台窗口并确保进入应用程序的“src”目录中,然后运行以下命令。
$ go run main.go
接下来打开 Web 浏览器并导航到“http://localhost:8000”站点。 然后就会显示聊天屏幕,你可以在聊天屏幕中输入电子邮件和用户名。
如果要查看该应用多个用户之间的通信方式,只需另外打开一个浏览器标签页或窗口,然后导航到“http://localhost:8000”。 输入不同的电子邮件和用户名。然后轮流从两个窗口发送消息,这样就可以看到多个用户之间的通信方式了。
这只是一个基本的聊天应用程序,你可以在此基础上进行更多的改进,添加更多的其他功能,并上传源代码,期待你能实现新用户加入或者离开聊天时的私人提醒或者通知。尽情创造吧,此处不设限!
我希望这篇文章对你有所帮助,并希望借此启发你使用 WebSockets 和 Go 开始创建自己的实时应用程序