Html5 + Websocket implemented Web chat (can group chat)

Nonsense Housewives (junior partner in a hurry directly Ctrl + f "text" and start reading)

Recently the company's business needs an online chat feature, the boss said, "This should not be difficult now, there needs big user, our 15 number (a week later) to it on the line," i. . . Although a number of psychological panic, but the boss for the first time directly to work, to leave a good impression na, have a proper code of EQ farming is not it. EQ pull over instant results, IQ is gone, a "good" word reply easily, but the zezheng it, I was forced to look ignorant

 

Developments

Under flashback, referring to the next result, the last line on schedule function, without any bug , celebrate, boss also received praise. The service was particularly thanks to a third-party product - GoEasy , simply cure, with its night I feel like blowing out Niubi are saved.

Keke, Closer to home, to tell you that my idea to solve this problem.

A large number of search keywords

IM , I first thought of the word, then a look of major plant Solution are complete, but a look at the document I was ignorant of the force, API is too rich, full social program is doing, packing out sdk thieves also big, big things done first, a multi-pit, and second, the volume is too slow to load, bad user experience they have to turn to find ways to optimize, so abandoned it.

The WebSocket , which is looking at some of the words on chat and message push Bowen, have appeared, I follow it, it really is most IM underlying implementation, the underlying meaning is very light, implementation should not complicated. Facts have proved that I was right half of the light is really light, a large number of articles about how I want to customize the function of thinking is very clear, but I ran into another problem that the performance and optimization. Because although most were to achieve some functionality, but it looks like from stable on Live environmental needs are far worse. Although we are a small company, but the peak of online users still have 400 more of our news and timeliness requirements are relatively high, concurrent + aging, I guess I rub this optimization study 1 month do not know can not be coming out. 

Websocket the Java , and then I started to focus directly under their own specific programming language, big java talent, there will be a big brother to save me. I was getting more and more nervous, and some demo I ran okay, be a test. . . Questions abound. Forced to, I began to look at third-party service products, and rolled over, the giant advertising are ignored, this time to look GoEasy a very simple self-introduction "simpler Websocket " I rely on, is looking for you ah.

One hour to get Demo (begin text)

I takes up a big first glanced at home, content and layout are considered simple style. Time waits for no one, I'll point "Quick Start" to start the whole. Official says 9 minutes to get my 7 Minute Run through.

Really tmd simple ah, I am excited with the front says prepared to put forward a little with the demo test, the results look around, I am a sucker 10 Dian still in office. Well, write a small html engage in their own first-hand thing. After a burst of Baidu, hey, although the UI ugly, JS not standardized, but "to achieve multiplayer online group chat functionality has been achieved!", Here for everyone to look at screenshots and code, the code is pure html , " 50 lines of plain html Oh achieve "the light of this, you know this GoEasy the websocket package how good.

<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>
	<br/>
	<input type="text" id="message" />
    <input type="button" value="推送消息" onclick="publishMessage()"/>
    <input type="button" value="取消订阅" onclick="unsubscribe()"/>
</body>
</html>

事后总结

互联网发展到现在已经是相当成熟了,造轮子真是非常吃力不讨好的事了,至少对于我这些种初级的码农来说。平时都是写业务,但为了更好的解决问题,学会使用第三方服务,也是一种新的必要能力了,能解决问题才有核心竞争力,对前辈们做出的产品深度体验后,通过api也会了解他们的coding设计理念,api的精妙设置背后肯定是他们架构经验的体现。

最后帮GoEasy打个广告,除了产品好用,他们现在的技术支持也超级给力,那天晚上11点还给说了实现功能的思路,瞬间把我点透。

来咯,GoEasy 更简单的WebSocket,让我们专注codingWebSocket就交给他们解决吧。加油!

Guess you like

Origin www.cnblogs.com/maolan/p/11112343.html