Html5 + Websocket 实现的Web聊天（可群聊）

杨一鲲 發表於 2019-7-1 09:39:00

Html5 + Websocket 实现的Web聊天（可群聊）

<h2 class="MsoTitle">扯淡的前情提要（赶时间的小伙伴直接ctrl+f“正文”，开始阅读）</h2>
最近公司业务需要上一个在线聊天的功能，老板说“这个应该不难吧，用户那边需求挺大，我们15号（一周后）给它上线吧”，我。。。心理虽然慌的一批，但是老板第一次直接给工作，要留个好印象呐，得当个有情商的码农是吧。结果情商拉满的瞬间，智商就没了，一个“好”字回复的轻松，可是该咋整呢，我是一脸懵逼
 <img src="https://uploader.shimo.im/f/NCLjmGH9nQ4UiwcF.png!thumbnail">
<h2>事态发展</h2>
倒叙下，说下结果，最后功能按期上线，且没有出任何bug，普天同庆，还获得老板表扬。在此得特别感谢一个第三方服务产品——GoEasy，简直是特效药，用它的当晚我就感觉自己吹出去的牛逼有救了。
咳咳，言归正传，给大家说下我解决这个问题的思路。
<h3>大量关键词搜索</h3>
IM，是我第一个想到的词，后来一看各大厂的方案解决方案都很齐全，但是一看文档我就懵逼了，api过于丰富，完全就是做社交的方案，打包出来的sdk也贼大，东西一大做起来一是坑多，二是体积太大加载慢，用户体验不好又得反过来想办法优化，所以抛弃之。
Websocket，这是在看一些关于聊天和消息推送的博文中，都出现的词，我顺藤摸瓜，果然这是大多数IM的底层实现，底层意味着很轻，实现应该也不复杂。事实证明，我猜对了一半，轻确实轻，大量文章关于如何定制成我想要的功能，思路很清晰，但是我碰到了另一个问题，就是性能和优化的问题。因为多数文章虽然都实现了部分功能，但是貌似离可稳定上Live环境需求的都差之甚远。我们虽然公司小，但是在线用户高峰期还是有400多个，而且我们对消息时效性要求比较高，并发+时效，我擦这优化估计我研究1个月都不知道能不能出山。 
 <img src="https://uploader.shimo.im/f/P2I05WuNFR4OGc2r.png!thumbnail">
Java Websocket，随后我开始直接聚焦自己编程语言下的具体实现了，大java人才济济，一定会有大佬拯救我的。可我是越看越慌，有的demo我一跑还行，可一测。。。问题百出。迫不得已，我开始看第三方服务产品了，翻了一下，把大厂的广告都忽略了，这时候就瞧到GoEasy了，很朴素的自我介绍“更简单的Websocket”，我靠，找的就是你啊。
<h3>一小时搞定Demo（正文开始）</h3>
一上来我大先概瞅了一眼首页，内容和排版都算是简约风格。时间不等人，我马上点“快速入门”开始整。官方说9分钟可以搞定，我7分钟跑通。
<img src="https://uploader.shimo.im/f/WCE0dzVQaI4LlQpl.png!thumbnail">
还真是tmd简单啊，我激动的准备跟前端说一起搞个小demo测试下，结果环顾四周，就我一个傻逼10点还在办公室。好吧，写点小html自己搞一手嘛。一阵百度过后，嘿嘿，虽然UI丑陋，js也不规范，但“实现多人在线群聊的功能已经实现了！”，下面给大家看下截图和代码，代码是纯html，“50行纯html实现的哦”，光这一点，你就知道这个GoEasy把websocket封装的有多好了。
 <img src="https://uploader.shimo.im/f/lZal0pSN5MItbWm7.gif">
<div class="cnblogs_Highlighter">
<pre class="brush:html;gutter:true;"><html>
<head>
<title>GoEasy Test</title>
<script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
<script type="text/javascript">
var textarea_value = document.getElementById("textarea");
if(typeof GoEasy !== 'undefined'){
 var goEasy = new GoEasy({
 appkey: '**********'
 });
}

//页面一加载就订阅
goEasy.subscribe({
 channel: 'demo_channel',
 onMessage: function(message){
if(!textarea_value) {
textarea_value = "";
}
textarea_value = textarea_value + message.content + "\n";
 //console.log('Meessage received:'+message.content);
//alert('收到：'+message.content);
document.getElementById("textarea").value = textarea_value;

 }
});

//推送消息
function publishMessage(){
 goEasy.publish({
 channel: 'demo_channel',
 message: document.getElementById("message").value
 });
}

//取消订阅的页面不会再收到信息
function unsubscribe(){
 goEasy.unsubscribe({
 channel:"demo_channel"
 });
}
</script>
</head>
<body>
<textarea id="textarea" rows="20" cols ="50">
</textarea>
 
<input type="text" id="message" />
<input type="button" value="推送消息" onclick="publishMessage()"/>
<input type="button" value="取消订阅" onclick="unsubscribe()"/>
</body>
</html></pre>
</div>
<h2>事后总结</h2>
互联网发展到现在已经是相当成熟了，造轮子真是非常吃力不讨好的事了，至少对于我这些种初级的码农来说。平时都是写业务，但为了更好的解决问题，学会使用第三方服务，也是一种新的必要能力了，能解决问题才有核心竞争力，对前辈们做出的产品深度体验后，通过api也会了解他们的coding设计理念，api的精妙设置背后肯定是他们架构经验的体现。
最后帮GoEasy打个广告，除了产品好用，他们现在的技术支持也超级给力，那天晚上11点还给说了实现功能的思路，瞬间把我点透。
来咯，GoEasy更简单的WebSocket，让我们专注coding，WebSocket就交给他们解决吧。加油！
</audio> 
来源：https://www.cnblogs.com/maolan/p/11112343.html

頁: [1]

琼殿技术论坛's Archiver

Html5 + Websocket 实现的Web聊天（可群聊）