收藏官网首页
查看: 19481|回复: 1

[分享] 一些比较成熟的WebSocket服务端实现

13

主题

14

帖子

138

积分

注册会员

Rank: 2

积分
138
跳转到指定楼层
楼主
发表于 2017-2-8 18:21:47 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
注册成为机智云开发者,手机加虚拟设备快速开发


在实际的开发过程中,为了使用WebSocket接口构建Web应用,我们首先需要构建一个实现了 WebSocket规范的服务端,服务端的实现不受平台和开发语言的限制,只需要遵从WebSocket规范即可,目前已经出现了一些比较成熟的WebSocket服务端实现,比如本文使用的Node.js+http://Socket.IO。为什么选用这个方案呢?先来简单介绍下他们两。

Node.jsNode.js采用C++语言编写而成,它不是Javascript应用,而是一个Javascript的运行环境,据Node.js创始人Ryan Dahl回忆,他最初希望采用Ruby来写Node.js,但是后来发现Ruby虚拟机的性能不能满足他的要求,后来他尝试采用V8引擎,所以选择了C++语言。

Node.js支持的系统包括*nux、Windows,这意味着程序员可以编写系统级或者服务器端的Javascript代码,交给Node.js来解释执行。Node.js的Web开发框架Express,可以帮助程序员快速建立web站点,从2009年诞生至今,Node.js的成长的速度有目共睹,其发展前景获得了技术社区的充分肯定。

http://Socket.IOhttp://Socket.IO是一个开源的WebSocket库,它通过Node.js实现WebSocket服务端,同时也提供客户端JS库。http://Socket.IO支持以事件为基础的实时双向通讯,它可以工作在任何平台、浏览器或移动设备。

http://Socket.IO支持4种协议:WebSocket、htmlfile、xhr-polling、jsonp-polling,它会自动根据浏览器选择适合的通讯方式,从而让开发者可以聚焦到功能的实现而不是平台的兼容性,同时http://Socket.IO具有不错的稳定性和性能。

编码实现

本文一开始的的插图就是效果演示图:可以点击这里查看在线演示,整个开发过程非常简单,下面简单记录了开发步骤:

安装Node.js根据自己的操作系统,去Node.js官网下载安装即可。如果成功安装。在命令行输入node -v和npm -v应该能看到相应的版本号。

搭建WebSocket服务端

这个环节我们尽可能的考虑真实生产环境,把WebSocket后端服务搭建成一个线上可以用域名访问的服务,如果你是在本地开发环境,可以换成本地ip地址,或者使用一个虚拟域名指向本地ip。

先进入到你的工作目录,比如 /workspace/wwwroot/plhwin/http://realtime.plhwin.com,新建一个名为package.json的文件,内容如下:

接下来使用npm命令安装express和http://socket.io


安装成功后,应该可以看到工作目录下生成了一个名为node_modules的文件夹,里面分别是express和http://socket.io,接下来可以开始编写服务端的代码了,新建一个文件:index.js


命令行运行node index.js,如果一切顺利,你应该会看到返回的listening on *:3000字样,这说明服务已经成功搭建了。此时浏览器中打开 http://localhost:3000 应该可以看到正常的欢迎页面。

如果你想要让服务运行在线上服务器,并且可以通过域名访问的话,可以使用Nginx做代理,在nginx.conf中添加如下配置,然后将域名(比如:http://realtime.plhwin.com)解析到服务器IP即可。

完成以上步骤,http://realtime.plhwin.com:3000的后端服务就正常搭建了。


服务端代码实现前面讲到的index.js运行在服务端,之前的代码只是一个简单的WebServer欢迎内容,让我们把WebSocket服务端完整的实现代码加入进去,整个服务端就可以处理客户端的请求了。完整的index.js代码如下:

客户端代码实现进入客户端工作目录/workspace/wwwroot/plhwin/http://demo.plhwin.com/chat,新建一个index.html:


上面的html内容本身没有什么好说的,我们主要看看里面的4个文件请求:
1、http://realtime.plhwin.com:3000/socket.io/socket.io.js
2、style.css
3、json3.min.js
4、client.js

第1个JS是http://Socket.IO提供的客户端JS文件,在前面安装服务端的步骤中,当npm安装完http://socket.io并搭建起WebServer后,这个JS文件就可以正常访问了。
第2个style.css文件没什么好说的,就是样式文件而已。
第3个JS只在IE8以下版本的IE浏览器中加载,目的是让这些低版本的IE浏览器也能处理json,这是一个开源的JS,详见:JSON 3
第4个client.js是完整的客户端的业务逻辑实现代码,它的内容如下:

至此所有的编码开发工作全部完成了,在浏览器中打开 http://demo.plhwin.com/chat/ 就可以看到效果了。
上面所有的客户端和服务端的代码可以从Github上获得,地址:https://github.com/plhwin/nodejs-socketio-chat




下载本地后有两个文件夹 client 和 server,client文件夹是客户端源码,可以放在Nginx/Apache的WebServer中,也可以放在Node.js的WebServer中。后面的server文件夹里的代码是websocket服务端代码,放在Node.js环境中,使用npm安装完 express 和 http://socket.io 后,node index.js 启动后端服务就可以了。


留给我们的思考
1、假设是一个在线客服系统,里面有许多的公司使用你的服务,每个公司自己的用户可以通过一个专属URL地址进入该公司的聊天室,聊天是一对一的,每个公司可以新建多个客服人员,每个客服人员可以同时和客户端的多个用户聊天。

2、又假设是一个在线WebIM系统,实现类似微信,qq的功能,客户端可以看到好友在线状态,在线列表,添加好友,删除好友,新建群组等,消息的发送除了支持基本的文字外,还能支持表情、图片和文件。

有兴趣的同学可以继续深入研究。

--------------------------

作者:潘良虎
链接:https://www.zhihu.com/question/20215561/answer/26419995
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

13

主题

14

帖子

138

积分

注册会员

Rank: 2

积分
138
沙发
 楼主| 发表于 2017-2-8 18:22:50 | 只看该作者
WebSocket 根本不是 HTML5 的东西。

WebSocket 是一个协议,归属于 IETF。
WebSocket API 是一个 Web API,归属于 W3C。
两个规范是独立发布的。

广义上的 HTML5 里面包含的是 WebSocket API,并不是 WebSocket。简单的说,可以把 WebSocket 当成 HTTP,WebSocket API 当成 Ajax。

只是因为 WebSocket 对于非 Web 部分的意义不大(毕竟直接用 TCP 就好了),所以从现实角度的概率上而言 WebSocket 目前基本只会通过 Web API 里的 WebSocket API 来使用。

但并不等于 WebSocket 属于 WebSocket API。

作者:Trotyl Yu
链接:https://www.zhihu.com/question/20215561/answer/117875755
来源:知乎
著作权归作者所有,转载请联系作者获得授权。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

加入Q群 返回顶部

版权与免责声明 © 2006-2024 Gizwits IoT Technology Co., Ltd. ( 粤ICP备11090211号 )

快速回复 返回顶部 返回列表