node.js做的聊天室

black_zerg

看了UB的关于nodejs的帖子，很受启发。就做了个聊天室，主要是练手，nodejs确实很强悍。
http://nodejs-alexshen.rhcloud.com/chat.html

左下角改名字，或者这样： http://nodejs-alexshen.rhcloud.com/chat.html?name=John

代码很短，如果大家有兴趣，我就丢github上去。我们可以做个全功能聊天室。

主要就用了express, socket io. 说实在没几行代码，倒是调环境画html画了半天。

ubuntuhk

赶紧丢到github上，大家一起切磋一下

black_zerg

好，明天上班弄，哈哈，挖资本主义墙角。说实在的还是nodejs强。不过大家如果有兴趣一起搞开源聊天室，我觉得还是很有意思的，主要是练习这个工作流，还有就是大家互相交流，互相学习。比如能不能做一个angular JS的前端实现。

cfk

我们公司原来用很多nodejs做一些大负载的服务，在过去一年里面基本上全部都用 Golang 重写了，群众纷纷表示 Golang 性能和稳定性都比 NodeJS 更好。

ubuntuhk

cfk 发表于 14-7-2014 20:29

                               
登录/注册后可看大图

我们公司原来用很多nodejs做一些大负载的服务，在过去一年里面基本上全部都用 Golang 重写了，群众纷纷表示 ...

golang是编译型语言，都说是php的风格，java的运行模式，性能上应该是很好的，适合做一些高性能方面的服务，不过golang的第三方库应该不如nodejs的NPM丰富，你们从nodejs移植过去，代价大吗？

cfk

ubuntuhk 发表于 14-7-2014 20:37

                               
登录/注册后可看大图

golang是编译型语言，都说是php的风格，java的运行模式，性能上应该是很好的，适合做一些高性能方面的服 ...

基本上都是http服务，几个面向浏览器，几个内部API。对比nodejs的文章都烂大街了，总之就是

* 强类型
* 编译到机器码
* 无虚拟机无解释器
* 自动GC
* 自动多核

代码其实比nodejs更加容易看，不会有讨厌的callback。

我们没有移植，全部是重写的。

cfk

ubuntuhk 发表于 14-7-2014 20:37

                               
登录/注册后可看大图

golang是编译型语言，都说是php的风格，java的运行模式，性能上应该是很好的，适合做一些高性能方面的服 ...

第三方类库有些是很坑爹的，比如 StatsD 模块，IP地址变换之后不会自动重新解析，当然新版本修正了

自带的库质量不错的，没什么坑。不过每次升级都会有一些新的API出来，要及时跟上。

另外tips就是Golang 1.3编译器出来的性能比1.1/1.2要高蛮多的，能用新的就不要用旧的。 Golang其实满受sysadmin喜欢的，再也不用管那些动态库的依赖，一个文件搞定。

ubuntuhk

cfk 发表于 14-7-2014 20:41

                               
登录/注册后可看大图

基本上都是http服务，几个面向浏览器，几个内部API。对比nodejs的文章都烂大街了，总之就是

* 强类型
...

是的，golang对于php、c、c++、java的开发者而言，学习曲线很低，而且它也是异步调用，所以性能很好，对于一些不需要依赖第三方开发库的应用来说，还是挺不错的选择。 golang的性能也比php好很多。

ubuntuhk

cfk 发表于 14-7-2014 20:45

                               
登录/注册后可看大图

第三方类库有些是很坑爹的，比如 StatsD 模块，IP地址变换之后不会自动重新解析，当然新版本修正了

自 ...

对，没有静态库的依赖，一次编译，到处运行，比java还省事，这一点确实做得很不错，我感觉对于一些特定用途的提供数据的API，golang是很好的选择。

看来cfk在golang方面的经验也很丰富，有空欢迎单独开个帖子给大家介绍golang的开发经验。

蒙面超人

拜托！别太过分了好不好，NODE还没搞懂，又来个GOLANG！我儿子绝对不让他学挨踢！

ubuntuhk

蒙面超人 发表于 14-7-2014 22:00

                               
登录/注册后可看大图

拜托！别太过分了好不好，NODE还没搞懂，又来个GOLANG！我儿子绝对不让他学挨踢！

让他学律师、会计、医生吧。。。。。。


好不到哪去，也都需要持续学习，哈哈

black_zerg

https://github.com/shenAwesome/chatroom

ubuntuhk

black_zerg 发表于 15-7-2014 14:26

                               
登录/注册后可看大图

https://github.com/shenAwesome/chatroom

看了一下源码，感觉服务器端非常简洁，但是客户端的代码没有我想象的简洁，客户端没有使用任何框架，对吧？

black_zerg

Pure hand written code haha. And I created a scroll bar for it because the browser default doesn't fit my theme.

就像这个页面http://nodejs-alexshen.rhcloud.com/desktop.html 也没用任何框架,全部手写。 所以我才说前台框架没那么绝对重要，省点事而已。没有一样过。我五六年前开始认真学javascript,那时候是很喜欢用jquery的，什么都想写成插件。慢慢的就觉得不是那么重要了，网络上各种插件良莠不齐，不少其实都很不怎么样。现在浏览器也前进了，没有jquery也不是不能活。而且这些库用多了，反而少了个练手机会。如果做前端，就必须不断的练手。javascript这个语言还是很有意思的。
如果前端真要用库，我比较推崇lodash，比较有用。我以前还试过自己写库复制jquery的功能，后来感觉那种function链也就那么回事，写完了就丢了。

我个人对编程语言的看法就是大东西还是应该面向对象，细节实现上可以用functional的一些概念来简化。现在面向对象不流行了，伤感啊。说道原因，那就是网页太好做了，都太简单，怎么写都行。再一个就是变化大，不需要复用。 所以实事求是地说，大多数情况面向对象的优势体现不出来。在一个就是javascript本身就没有像样的类语法

发现Polymer很有意思，刚看了几个视频。看起来很酷,解决了scope还有load css等问题，我准备下一步有空就琢磨这个。

ubuntuhk

black_zerg 发表于 15-7-2014 15:38

                               
登录/注册后可看大图

Pure hand written code haha. And I created a scroll bar for it because the browser default doesn't f ...

我对你对前端framework不以为然的态度表示不以为然，因为我没觉得你手写的前端页面或者里面的代码有多么优雅，无法证明你手工打造的轮子比用现成的轮子好

cfk

"难者不会，会者不难。"


比如我这种对前端真是很没经验，自己手写哪有用框架来的方便和少bug。如果让我造轮子，恐怕会是和螺丝一样的六角形...

black_zerg

ubuntuhk 发表于 16-7-2014 03:05
我对你对前端framework不以为然的态度表示不以为然，因为我没觉得你手写的前端页面或者里面的代码有多么 ...

Good point! Then you can write one without frameworks, prove to me that you can use less and cleaner code. Using framework is boring. If you like coding then DIY is more interesting then calling APIs.

The real advantage of DIY is less dependency.  If I create a Js lib, I wouldn't ask everyone use my lib to include jQuery or angular, size matters.

ubuntuhk

black_zerg 发表于 16-7-2014 12:20

                               
登录/注册后可看大图

Good point! Then you can write one without frameworks, prove to me that you can use less and clean ...

哈，你将我军啊，明知道我不会前端的，但是我看过别人利用框架写的前端代码。

这里有一个melbourne angularjs meetup活动的slides和demo代码：
http://www.andrewgreig.com/demo/angularjs-intro/presentation/
https://www.dropbox.com/s/wp3nrht31c4ok6o/AngularJS-demo.zip

有兴趣的同学可以看看，当时作者向大家演示如何在20分钟内（实际花了大概22分钟），用AngularJS＋firebase（在线实时数据存储）编写一个竞价拍卖的演示，可以利用Facebook等第三方登录账号，多人实时竞拍，所用的代码非常简洁。


（补充一下，上面这个demo的源代码是另外一个演示，是一个用AngularJS做的用户留言评论系统，也很简洁）

black_zerg

Yes. It's pretty easy to use angular in this case. But I don't see it's better, just different, let me create one now

ubuntuhk

black_zerg 发表于 16-7-2014 12:41

                               
登录/注册后可看大图

Yes. It's pretty easy to use angular in this case. But I don't see it's better, just different, let  ...

好啊，我最欣赏你的动手能力了。

我是觉得不应该有一个思维定势，说框架就是不好，从而拒绝了好东西。

各种工具、库、框架都有自己的特色，根据不同的应用常见挑最适合的工具、库和框架，这也是一门本事

black_zerg

angular version:
http://nodejs-alexshen.rhcloud.com/chat2.html

black_zerg

Those frameworks are handy but also limit you. I do agree angular Js is nice for most use cases. Because my interest is not normal website, so frameworks are not very helpful. I wasted lots of time on GWT until I realized that I had to get myself comfortable with Dom and CSS, js

ubuntuhk

black_zerg 发表于 16-7-2014 13:17

                               
登录/注册后可看大图

angular version:
http://nodejs-alexshen.rhcloud.com/chat2.html

我把你实现的两个版本的代码摘抄出来对比一下，感觉虽然两个版本的代码量差不多，但是如果进一步扩展功能（比如加入分组讨论、自动刷新用户在线状态等），AngularJS的版本显然会更容易扩展一些，而且逻辑和UI分得很清楚，结论，在这个场景下，AngularJS很胜任，如果加上boostrap做界面，估计代码和界面都会更简洁优雅（现在代码还有不少CSS的内容，我没摘抄出来）：

欢迎其它同学写一个更简洁的版本PK一下（我是不会，要不然我也写一个，哈哈）

手工控制HTML Version

1. 
   
2. <body style="min-height:100px;">
   
3.     <div style="margin:auto;height:100%;padding:5px; position:relative;">
   
4.         <button onclick="clearBoard()" type="button"
   
5.                 style="top:10px; right:22px;position:absolute;z-index:1000;">Clear</button>
   
6.         <div id="board"> </div>
   
7.                 <div class="input">
   
8.             <input style="width:80px;" id="nameBox" /><label style="width:20px;">&gt;</label><input style="width:calc(100% - 100px);" id="msgBox" />
   
9.                 </div>
   
10.     </div>  
    
11.     <script>
    
12.         var params = {}
    
13.         location.search.substr(1).split("&").forEach(function (item) { params[item.split("=")[0]] = item.split("=")[1] })
    
14.         nameBox.value = params.name || 'anonymous';
    
15. 
    
16.         var socket = io.connect();
    
17.         socket.on('news', function (data) {
    
18.             var item = document.createElement('div');
    
19.                         item.className='item';
    
20.             item.innerHTML = data;
    
21.             board.appendChild(item);
    
22.             setTimeout(function () {
    
23.                 item.style.height = '2em';
    
24.                                 scroll.hide();
    
25.             }, 1)
    
26.             setTimeout(function () {
    
27.                 item.style.height = 'auto';
    
28.                 board.scrollTop = board.scrollHeight - board.clientHeight;
    
29.             }, 200)
    
30.             setTimeout(function () {
    
31.                 scroll.update();
    
32.             }, 400)  
    
33.         });
    
34.         msgBox.addEventListener('keydown', function (evt) {
    
35.             if (13 == evt.keyCode) {
    
36.                 socket.emit('msg', nameBox.value + ': ' + msgBox.value);
    
37.                 msgBox.value = '';
    
38.                 msgBox.focus();
    
39.                 if (window.isMobile) {
    
40.                     document.querySelector('button').focus();
    
41.                 }
    
42.             }
    
43.         })
    
44.         msgBox.focus();
    
45. 
    
46.         function clearBoard() {
    
47.             var items = board.querySelectorAll('.item');
    
48.                         for(var i=0;i<items.length;i++){
    
49.                                 board.removeChild(items[i]);
    
50.                         }
    
51.             msgBox.focus();
    
52.         }
    
53.                 var scroll = addScroll(board);
    
54.                
    
55.     </script>
    
56. </body>
    

复制代码

AngularJS version:

1. 
   
2. <script>
   
3. 
   
4.                 function MyCtrl($scope){
   
5.                     $scope.items = [];
   
6.                         var socket = io.connect();
   
7.                         socket.on('news', function (data) {
   
8.                             $scope.items.push(data);
   
9.                             $scope.$apply();
   
10.                         });
    
11. 
    
12.                         $scope.keypress = function (ev) {
    
13.                             if (ev.which == 13) {
    
14.                                 var msg = $scope.nameBox + ': ' + $scope.msgBox;
    
15.                                 socket.emit('msg', msg);
    
16.                                 $scope.msgBox = '';
    
17.                                 //$scope.items.push(msg);
    
18.                             }
    
19.                         }
    
20. 
    
21.                         $scope.clear = function () {
    
22.                             $scope.items.length = 0;
    
23.                         }
    
24. 
    
25.                         //msgBox
    
26.                         var params = {}
    
27.                         location.search.substr(1).split("&").forEach(function (item) { params[item.split("=")[0]] = item.split("=")[1] })
    
28.                         $scope.nameBox = params.name || 'anonymous';
    
29.                 }
    
30. 
    
31.     </script>
    
32.        
    
33. </head>
    
34. <body style="min-height:100px;" ng-controller="MyCtrl">
    
35.     <div style="margin:auto;height:100%;padding:5px; position:relative;">
    
36.         <button type="button" ng-click="clear()"
    
37.                 style="top:20px; right:22px;position:absolute;z-index:1000;">
    
38.             Clear
    
39.         </button>
    
40.         <div id="board">
    
41.             <div ng-repeat="item in items" class="item">{{item}} </div>
    
42.         </div>
    
43.         <div class="input">
    
44.             <input style="width:80px;" id="nameBox" ng-model="nameBox" /><label style="width:20px;">&gt;</label><input style="width:calc(100% - 100px);" id="msgBox" ng-model="msgBox" ng-keypress="keypress($event)" />
    
45.         </div>
    
46.     </div>
    
47. </body>
    

复制代码

black_zerg

个人看法， angular能让简单事情更简单，复杂事情更复杂。手写版本第一个优势就是省了客户200k流量。第二就是我可以在任何事件做任何事。 比如我可以让用户打字一半飞出个球来。第三就是可以保证最优速度，没有任何多余逻辑。 最重要一点就是没有神秘代码，任何地方的逻辑都可见可修改，用angular的话就是个强依赖还有学习成本。这个只有试了才知道。谁写个全功能angular 版， 我来写纯js版本， 就能比出来

另外上面的代码其实也能说明问题， 我的js 版本有个自制的scroll bar，因为浏览器自带的太丑。 angular的版本就一时想不出来怎么整合，就丢了这功能。另外还有动画效果，angular版本也给省了

这些web框架都是opinionated的，也就是说是双刃剑。如果你的系统复杂而且需求无法预期，还是不能低估这个成本。用在项目中，前期必须做一个prototype来做到心中有数。有个很大的好处就是代码风格容易统一，另外屏蔽了很多dom上的东西，从某意义来说也许上手更快，而且可以让多数程序员集中在业务逻辑上。有助于分工。其实这个mvvm的核心思想就是制造一个傻瓜相机。明显的优点就是更安全了。

cais

cfk 发表于 14-7-2014 20:29

                               
登录/注册后可看大图

我们公司原来用很多nodejs做一些大负载的服务，在过去一年里面基本上全部都用 Golang 重写了，群众纷纷表示 ...

前两天刚看到这篇。正好来请教一下内行人，说得到底对不对：
http://yager.io/programming/go.html

cfk

cais 发表于 16-7-2014 22:48

                               
登录/注册后可看大图

前两天刚看到这篇。正好来请教一下内行人，说得到底对不对：
http://yager.io/programming/go.html

说的是的对呀，不过都是 bullshit

* 一会儿和Haskell比，一会儿和Java比，一会儿和Python比，这个到不能说是非常公平的。
* golang对于某些应用足够好了，谁没事干会用Haskell呢

Rob Pike (Golang创世大神之一) 曾经写过"Systems Software Research is Irrelevant"，由此可见Golang是作为一个更好的C++/C出现的，没有野心替代 Java/Python

ubuntuhk

cfk 发表于 17-7-2014 07:29

                               
登录/注册后可看大图

说的是的对呀，不过都是 bullshit

* 一会儿和Haskell比，一会儿和Java比，一会儿和Python比，这个到不 ...

我也觉得这种比较有点不靠谱。golang有它的长处，在适用的地方，尽量发挥它的长处，避免短处，就好了。

不过我不看好golang能流行的一个原因是，精通c、c++ web开发者越来越少，所以它的开发群体远远不如php、javascript，只能作为一个小众开发语言，找到它的一些对性能要求比较高的服务器端来发挥作用。

ubuntuhk

black_zerg 发表于 16-7-2014 19:53

                               
登录/注册后可看大图

个人看法， angular能让简单事情更简单，复杂事情更复杂。手写版本第一个优势就是省了客户200k流量。第二就 ...

好吧，各自保留观点，等我找个angularjs的高手和你pk一下，反正聊天室这种应用，我不信在同样的开发时间内，手写的能pk过angularjs+其它框架，无论在功能、性能、美观上（不要和我说打字打到一半飞出一个球这种需求，这不是打字游戏，即便有这种需求，我相信angularjs这些也能实现 ）

老鼠爱上猫

我觉得angular不仅是开发时间的优势，还有dependency injection，模块化，two-way data binding，可以重复使用的定制directive，各种好处，我倒觉得开发比较大的app，尤其是CRUD类型的app，用angular对于扩展和维护都很方便。

当然这里只是讨论前端。

black_zerg

ubuntuhk 发表于 17-7-2014 13:55
好吧，各自保留观点，等我找个angularjs的高手和你pk一下，反正聊天室这种应用，我不信在同样的开发时 ...

Yeah, haha. I like challenges. I have a map project that I wrote in GWT, then I rewrote in pure JavaScript, now I started to rewriting in typescript.same functions but I just want to see if I can do better. Programming is a hobby to me. I am not saying angular is bad but since it's so powerful, you should be able to beat me easily right