FreeOZ论坛

标题: node.js做的聊天室 [打印本页]

作者: black_zerg    时间: 14-7-2014 20:38
提示: 作者被禁止或删除, 无法发言 标题: node.js做的聊天室
看了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    时间: 14-7-2014 20:46


赶紧丢到github上,大家一起切磋一下
作者: black_zerg    时间: 14-7-2014 21:11
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 14-7-2014 20:13 编辑

好,明天上班弄,哈哈,挖资本主义墙角。说实在的还是nodejs强。不过大家如果有兴趣一起搞开源聊天室,我觉得还是很有意思的,主要是练习这个工作流,还有就是大家互相交流,互相学习。比如能不能做一个angular JS的前端实现。
作者: cfk    时间: 14-7-2014 21:29
我们公司原来用很多nodejs做一些大负载的服务,在过去一年里面基本上全部都用 Golang 重写了,群众纷纷表示 Golang 性能和稳定性都比 NodeJS 更好。
作者: ubuntuhk    时间: 14-7-2014 21:37
cfk 发表于 14-7-2014 20:29
我们公司原来用很多nodejs做一些大负载的服务,在过去一年里面基本上全部都用 Golang 重写了,群众纷纷表示 ...


golang是编译型语言,都说是php的风格,java的运行模式,性能上应该是很好的,适合做一些高性能方面的服务,不过golang的第三方库应该不如nodejs的NPM丰富,你们从nodejs移植过去,代价大吗?
作者: cfk    时间: 14-7-2014 21:41
ubuntuhk 发表于 14-7-2014 20:37
golang是编译型语言,都说是php的风格,java的运行模式,性能上应该是很好的,适合做一些高性能方面的服 ...

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

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

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

我们没有移植,全部是重写的。
作者: cfk    时间: 14-7-2014 21:45
ubuntuhk 发表于 14-7-2014 20:37
golang是编译型语言,都说是php的风格,java的运行模式,性能上应该是很好的,适合做一些高性能方面的服 ...

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

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

另外tips就是Golang 1.3编译器出来的性能比1.1/1.2要高蛮多的,能用新的就不要用旧的。 Golang其实满受sysadmin喜欢的,再也不用管那些动态库的依赖,一个文件搞定。
作者: ubuntuhk    时间: 14-7-2014 21:58
cfk 发表于 14-7-2014 20:41
基本上都是http服务,几个面向浏览器,几个内部API。对比nodejs的文章都烂大街了,总之就是

* 强类型
...


是的,golang对于php、c、c++、java的开发者而言,学习曲线很低,而且它也是异步调用,所以性能很好,对于一些不需要依赖第三方开发库的应用来说,还是挺不错的选择。 golang的性能也比php好很多。
作者: ubuntuhk    时间: 14-7-2014 22:00
cfk 发表于 14-7-2014 20:45
第三方类库有些是很坑爹的,比如 StatsD 模块,IP地址变换之后不会自动重新解析,当然新版本修正了

自 ...


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

看来cfk在golang方面的经验也很丰富,有空欢迎单独开个帖子给大家介绍golang的开发经验。
作者: 蒙面超人    时间: 14-7-2014 23:00
拜托!别太过分了好不好,NODE还没搞懂,又来个GOLANG!我儿子绝对不让他学挨踢!
作者: ubuntuhk    时间: 14-7-2014 23:04
蒙面超人 发表于 14-7-2014 22:00
拜托!别太过分了好不好,NODE还没搞懂,又来个GOLANG!我儿子绝对不让他学挨踢!



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


好不到哪去,也都需要持续学习,哈哈
作者: ubuntuhk    时间: 15-7-2014 15:08
black_zerg 发表于 15-7-2014 14:26
https://github.com/shenAwesome/chatroom


看了一下源码,感觉服务器端非常简洁,但是客户端的代码没有我想象的简洁,客户端没有使用任何框架,对吧?
作者: black_zerg    时间: 15-7-2014 15:26
提示: 作者被禁止或删除, 无法发言 https://github.com/shenAwesome/chatroom
作者: black_zerg    时间: 15-7-2014 16:38
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 15-7-2014 23:43 编辑

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    时间: 16-7-2014 04:05
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    时间: 16-7-2014 09:38
"难者不会,会者不难。"


比如我这种对前端真是很没经验,自己手写哪有用框架来的方便和少bug。如果让我造轮子,恐怕会是和螺丝一样的六角形...
作者: black_zerg    时间: 16-7-2014 13:20
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 16-7-2014 12:38 编辑
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    时间: 16-7-2014 13:26
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    时间: 16-7-2014 13:41
提示: 作者被禁止或删除, 无法发言 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    时间: 16-7-2014 13:50
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    时间: 16-7-2014 14:17
提示: 作者被禁止或删除, 无法发言 angular version:
http://nodejs-alexshen.rhcloud.com/chat2.html
作者: black_zerg    时间: 16-7-2014 14:20
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 16-7-2014 13:32 编辑

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    时间: 16-7-2014 18:27
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. <body style="min-height:100px;">
  2.     <div style="margin:auto;height:100%;padding:5px; position:relative;">
  3.         <button onclick="clearBoard()" type="button"
  4.                 style="top:10px; right:22px;position:absolute;z-index:1000;">Clear</button>
  5.         <div id="board"> </div>
  6.                 <div class="input">
  7.             <input style="width:80px;" id="nameBox" /><label style="width:20px;">&gt;</label><input style="width:calc(100% - 100px);" id="msgBox" />
  8.                 </div>
  9.     </div>  
  10.     <script>
  11.         var params = {}
  12.         location.search.substr(1).split("&").forEach(function (item) { params[item.split("=")[0]] = item.split("=")[1] })
  13.         nameBox.value = params.name || 'anonymous';

  14.         var socket = io.connect();
  15.         socket.on('news', function (data) {
  16.             var item = document.createElement('div');
  17.                         item.className='item';
  18.             item.innerHTML = data;
  19.             board.appendChild(item);
  20.             setTimeout(function () {
  21.                 item.style.height = '2em';
  22.                                 scroll.hide();
  23.             }, 1)
  24.             setTimeout(function () {
  25.                 item.style.height = 'auto';
  26.                 board.scrollTop = board.scrollHeight - board.clientHeight;
  27.             }, 200)
  28.             setTimeout(function () {
  29.                 scroll.update();
  30.             }, 400)  
  31.         });
  32.         msgBox.addEventListener('keydown', function (evt) {
  33.             if (13 == evt.keyCode) {
  34.                 socket.emit('msg', nameBox.value + ': ' + msgBox.value);
  35.                 msgBox.value = '';
  36.                 msgBox.focus();
  37.                 if (window.isMobile) {
  38.                     document.querySelector('button').focus();
  39.                 }
  40.             }
  41.         })
  42.         msgBox.focus();

  43.         function clearBoard() {
  44.             var items = board.querySelectorAll('.item');
  45.                         for(var i=0;i<items.length;i++){
  46.                                 board.removeChild(items[i]);
  47.                         }
  48.             msgBox.focus();
  49.         }
  50.                 var scroll = addScroll(board);
  51.                
  52.     </script>
  53. </body>
复制代码
AngularJS version:

  1. <script>

  2.                 function MyCtrl($scope){
  3.                     $scope.items = [];
  4.                         var socket = io.connect();
  5.                         socket.on('news', function (data) {
  6.                             $scope.items.push(data);
  7.                             $scope.$apply();
  8.                         });

  9.                         $scope.keypress = function (ev) {
  10.                             if (ev.which == 13) {
  11.                                 var msg = $scope.nameBox + ': ' + $scope.msgBox;
  12.                                 socket.emit('msg', msg);
  13.                                 $scope.msgBox = '';
  14.                                 //$scope.items.push(msg);
  15.                             }
  16.                         }

  17.                         $scope.clear = function () {
  18.                             $scope.items.length = 0;
  19.                         }

  20.                         //msgBox
  21.                         var params = {}
  22.                         location.search.substr(1).split("&").forEach(function (item) { params[item.split("=")[0]] = item.split("=")[1] })
  23.                         $scope.nameBox = params.name || 'anonymous';
  24.                 }

  25.     </script>
  26.        
  27. </head>
  28. <body style="min-height:100px;" ng-controller="MyCtrl">
  29.     <div style="margin:auto;height:100%;padding:5px; position:relative;">
  30.         <button type="button" ng-click="clear()"
  31.                 style="top:20px; right:22px;position:absolute;z-index:1000;">
  32.             Clear
  33.         </button>
  34.         <div id="board">
  35.             <div ng-repeat="item in items" class="item">{{item}} </div>
  36.         </div>
  37.         <div class="input">
  38.             <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)" />
  39.         </div>
  40.     </div>
  41. </body>
复制代码

作者: black_zerg    时间: 16-7-2014 20:53
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 16-7-2014 21:37 编辑

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

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

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

作者: cais    时间: 16-7-2014 23:48
cfk 发表于 14-7-2014 20:29
我们公司原来用很多nodejs做一些大负载的服务,在过去一年里面基本上全部都用 Golang 重写了,群众纷纷表示 ...

前两天刚看到这篇。正好来请教一下内行人,说得到底对不对:
http://yager.io/programming/go.html
作者: cfk    时间: 17-7-2014 08:29
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    时间: 17-7-2014 14:50
cfk 发表于 17-7-2014 07:29
说的是的对呀,不过都是 bullshit

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


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

不过我不看好golang能流行的一个原因是,精通c、c++ web开发者越来越少,所以它的开发群体远远不如php、javascript,只能作为一个小众开发语言,找到它的一些对性能要求比较高的服务器端来发挥作用。
作者: ubuntuhk    时间: 17-7-2014 14:55
black_zerg 发表于 16-7-2014 19:53
个人看法, angular能让简单事情更简单,复杂事情更复杂。手写版本第一个优势就是省了客户200k流量。第二就 ...



好吧,各自保留观点,等我找个angularjs的高手和你pk一下,反正聊天室这种应用,我不信在同样的开发时间内,手写的能pk过angularjs+其它框架,无论在功能、性能、美观上(不要和我说打字打到一半飞出一个球这种需求,这不是打字游戏,即便有这种需求,我相信angularjs这些也能实现
作者: 老鼠爱上猫    时间: 17-7-2014 15:15
我觉得angular不仅是开发时间的优势,还有dependency injection,模块化,two-way data binding,可以重复使用的定制directive,各种好处,我倒觉得开发比较大的app,尤其是CRUD类型的app,用angular对于扩展和维护都很方便。

当然这里只是讨论前端。


作者: black_zerg    时间: 17-7-2014 17:37
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 17-7-2014 16:46 编辑
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
作者: ubuntuhk    时间: 17-7-2014 18:44
black_zerg 发表于 17-7-2014 16:37
Yeah, haha. I like challenges. I have a map project that I wrote in GWT, then I rewrote in pure  ...



嗯,等我慢慢学web前端,不过得有一阵子才能写出类似的应用。

其他同学麻烦帮我用framework狠狠滴打击一下black zerg,自己写的代码更少、页面更好看(优雅)、功能更强
作者: black_zerg    时间: 17-7-2014 21:04
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 17-7-2014 20:13 编辑

其实我是java出身,开源框架那就是java生态里的中流砥柱。不过框架学归学,基础还是很重要。真正理解了,你就会发现有的框架也就那么回事,很容易就笨重的很。server端的东西笨重点没事,客户端目前还是要考虑大小和效率的。所以我当时开始苦练手写的原因就是openlayers这个库有700k, 而我想做到100k以下。现在勉强是做到120左右。等我用typescript再重写,看看依赖关系能不能更清晰。目标就是基本地图30k以下,然后根据需求打包,支持地图编辑之类的全包也要在100以下。

我做的例子就在这里 http://shenshowcase.appspot.com/static/map/demo/toolbar.html ,这个是大半年前的版本了,所以UB你要是看一下这个链接,就能明白我为什么说angularJS对我没用。(丢那里很久了,估计有些bug还有的地图源也失效了,但是你能看出个意思)

就像UB说的,什么情况用什么工具,再有一个就是如果觉得一个东西好,就要理清思路,明白它的优势到底在哪里,’陷阱‘又在哪里。难得有这么个论坛我们可以多动手,多交流
作者: 老鼠爱上猫    时间: 18-7-2014 17:04
其实这些东西没法说谁好谁不好,该用什么不该用什么,看project本身的资金,时间,app的功能和类型,还有就是app本身大小的要求,响应时间,等等。

另外,我觉得UI和UX也非常重要,虽然很多后端高手对前端技术很不屑,可是毕竟到最后,对用户来说,清晰的流程,简洁易用的界面,user-friendly的app才是成功的app吧(我不是指动画或者弹出来的球
作者: cais    时间: 21-7-2014 23:21
black_zerg 发表于 17-7-2014 20:04
其实我是java出身,开源框架那就是java生态里的中流砥柱。不过框架学归学,基础还是很重要。真正理解了,你 ...

你这段话我是很赞同的。
我也是做java的。但是以前很少用框架。现在觉得有点框架还是不错的。
那些可以让你定制,选择需要什么,不需要什么的框架,就比较好。
如果你对库本身的质量比较满意,只是有些东西你不需要,需要的你都觉得可以用,
那不妨做一点可以精简各个库的软件出来,根据你的程序实际调用到的函数,实时精简一下。
好像以前有看到过java方面的类似的。
只是现在很多AMD什么的,不好处理。要针对具体的框架来做。
作者: DDD888    时间: 28-7-2014 11:01
cfk 发表于 14-7-2014 20:41
基本上都是http服务,几个面向浏览器,几个内部API。对比nodejs的文章都烂大街了,总之就是

* 强类型
...

The issue is there is not much job ads related to golang.
作者: simpledream    时间: 29-7-2014 12:54
ubuntuhk 发表于 16-7-2014 03:05
我对你对前端framework不以为然的态度表示不以为然,因为我没觉得你手写的前端页面或者里面的代码有多么 ...

我对你对black_zerg不以为然态度的不以为然,表示以为然 确实没必要重新发明轮子如果不是为了学习的话

纯个人想法, I could be wrong
作者: ubuntuhk    时间: 29-7-2014 19:37
DDD888 发表于 28-7-2014 10:01
The issue is there is not much job ads related to golang.


golang的一个好处是效率比较高,可以一次编译到处运行(这点有点像java)。

不好的地方是又要学一门语言,所以如果不是特别针对一些高负载的backend的优化,一般公司不会特意采用golang。
作者: black_zerg    时间: 29-7-2014 21:56
提示: 作者被禁止或删除, 无法发言 本帖最后由 black_zerg 于 29-7-2014 21:02 编辑
simpledream 发表于 29-7-2014 11:54
我对你对black_zerg不以为然态度的不以为然,表示以为然  确实没必要重新发明轮子如果不是为了学习的话 ...


这个就好比你为什么要玩游戏杀小怪,别人不是已经杀过了么。再说了世界上有多少不同的轮子你仔细想想看。真的没人重新发明轮子大家还在做独轮车,要么就是汽车上装四个木头轮子,你受得了么。我功能完全一样的一个JS库现在已经是第三次重写,每次都陆陆续续写半年 还不算几次写一半就丢了的。代码就是越写越精致。 不过你们要是研究angular我也有兴趣,就请高手多分享了。
作者: ubuntuhk    时间: 30-7-2014 00:01
black_zerg 发表于 29-7-2014 20:56
这个就好比你为什么要玩游戏杀小怪,别人不是已经杀过了么。再说了世界上有多少不同的轮子你仔细想想看 ...


back zerg是享受造轮子的乐趣,这也不错。

我就喜欢使唤各种好用的轮子




欢迎光临 FreeOZ论坛 (https://www.freeoz.org/bbs/) Powered by Discuz! X3.2