nodejs http://www.baisifangcheng.com/node nodejs Sat, 28 Dec 2019 16:42:56 +0000 zh-CN hourly 1 https://wordpress.org/?v=4.0.30 一文详解微服务架构 http://www.baisifangcheng.com/node/archives/70 http://www.baisifangcheng.com/node/archives/70#comments Sat, 28 Dec 2019 16:42:56 +0000 http://www.baisifangcheng.com/node/?p=70 本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服 […]

一文详解微服务架构,首发于nodejs。

]]>
本文将介绍微服务架构和相关的组件,介绍他们是什么以及为什么要使用微服务架构和这些组件。本文侧重于简明地表达微服务架构的全局图景,因此不会涉及具体如何使用组件等细节。

要理解微服务,首先要先理解不是微服务的那些。通常跟微服务相对的是单体应用,即将所有功能都打包成在一个独立单元的应用程序。从单体应用到微服务并不是一蹴而就的,这是一个逐渐演变的过程。本文将以一个网上超市应用为例来说明这一过程。

最初的需求

几年前,小明和小皮一起创业做网上超市。小明负责程序开发,小皮负责其他事宜。当时互联网还不发达,网上超市还是蓝海。只要功能实现了就能随便赚钱。所以他们的需求很简单,只需要一个网站挂在公网,用户能够在这个网站上浏览商品、购买商品;另外还需一个管理后台,可以管理商品、用户、以及订单数据。

我们整理一下功能清单:

  • 网站
    • 用户注册、登录功能
    • 商品展示
    • 下单
  • 管理后台
    • 用户管理
    • 商品管理
    • 订单管理

由于需求简单,小明左手右手一个慢动作,网站就做好了。管理后台出于安全考虑,不和网站做在一起,小明右手左手慢动作重播,管理网站也做好了。总体架构图如下:576869-20190822202346027-1224149306

 

小明挥一挥手,找了家云服务部署上去,网站就上线了。上线后好评如潮,深受各类肥宅喜爱。小明小皮美滋滋地开始躺着收钱。

随着业务发展……

好景不长,没过几天,各类网上超市紧跟着拔地而起,对小明小皮造成了强烈的冲击。

在竞争的压力下,小明小皮决定开展一些营销手段:

  • 开展促销活动。比如元旦全场打折,春节买二送一,情人节狗粮优惠券等等。
  • 拓展渠道,新增移动端营销。除了网站外,还需要开发移动端APP,微信小程序等。
  • 精准营销。利用历史数据对用户进行分析,提供个性化服务。
  • ……

这些活动都需要程序开发的支持。小明拉了同学小红加入团队。小红负责数据分析以及移动端相关开发。小明负责促销活动相关功能的开发。

因为开发任务比较紧迫,小明小红没有好好规划整个系统的架构,随便拍了拍脑袋,决定把促销管理和数据分析放在管理后台里,微信和移动端APP另外搭建。通宵了几天后,新功能和新应用基本完工。这时架构图如下:

576869-20190822202405534-1135450495

 

这一阶段存在很多不合理的地方:

  • 网站和移动端应用有很多相同业务逻辑的重复代码。
  • 数据有时候通过数据库共享,有时候通过接口调用传输。接口调用关系杂乱。
  • 单个应用为了给其他应用提供接口,渐渐地越改越大,包含了很多本来就不属于它的逻辑。应用边界模糊,功能归属混乱。
  • 管理后台在一开始的设计中保障级别较低。加入数据分析和促销管理相关功能后出现性能瓶颈,影响了其他应用。
  • 数据库表结构被多个应用依赖,无法重构和优化。
  • 所有应用都在一个数据库上操作,数据库出现性能瓶颈。特别是数据分析跑起来的时候,数据库性能急剧下降。
  • 开发、测试、部署、维护愈发困难。即使只改动一个小功能,也需要整个应用一起发布。有时候发布会不小心带上了一些未经测试的代码,或者修改了一个功能后,另一个意想不到的地方出错了。为了减轻发布可能产生的问题的影响和线上业务停顿的影响,所有应用都要在凌晨三四点执行发布。发布后为了验证应用正常运行,还得盯到第二天白天的用户高峰期……
  • 团队出现推诿扯皮现象。关于一些公用的功能应该建设在哪个应用上的问题常常要争论很久,最后要么干脆各做各的,或者随便放个地方但是都不维护。

尽管有着诸多问题,但也不能否认这一阶段的成果:快速地根据业务变化建设了系统。不过紧迫且繁重的任务容易使人陷入局部、短浅的思维方式,从而做出妥协式的决策。在这种架构中,每个人都只关注在自己的一亩三分地,缺乏全局的、长远的设计。长此以往,系统建设将会越来越困难,甚至陷入不断推翻、重建的循环。

是时候做出改变了

幸好小明和小红是有追求有理想的好青年。意识到问题后,小明和小红从琐碎的业务需求中腾出了一部分精力,开始梳理整体架构,针对问题准备着手改造。

要做改造,首先你需要有足够的精力和资源。如果你的需求方(业务人员、项目经理、上司等)很强势地一心追求需求进度,以致于你无法挪出额外的精力和资源的话,那么你可能无法做任何事……

在编程的世界中,最重要的便是抽象能力。微服务改造的过程实际上也是个抽象的过程。小明和小红整理了网上超市的业务逻辑,抽象出公用的业务能力,做成几个公共服务:

  • 用户服务
  • 商品服务
  • 促销服务
  • 订单服务
  • 数据分析服务

各个应用后台只需从这些服务获取所需的数据,从而删去了大量冗余的代码,就剩个轻薄的控制层和前端。这一阶段的架构如下:

576869-20190822202424357-273666498

这个阶段只是将服务分开了,数据库依然是共用的,所以一些烟囱式系统的缺点仍然存在:

  1. 数据库成为性能瓶颈,并且有单点故障的风险。
  2. 数据管理趋向混乱。即使一开始有良好的??榛杓?,随着时间推移,总会有一个服务直接从数据库取另一个服务的数据的现象。
  3. 数据库表结构可能被多个服务依赖,牵一发而动全身,很难调整。

如果一直保持共用数据库的模式,则整个架构会越来越僵化,失去了微服务架构的意义。因此小明和小红一鼓作气,把数据库也拆分了。所有持久化层相互隔离,由各个服务自己负责。另外,为了提高系统的实时性,加入了消息队列机制。架构如下:

576869-20190822202438093-973893071

完全拆分后各个服务可以采用异构的技术。比如数据分析服务可以使用数据仓库作为持久化层,以便于高效地做一些统计计算;商品服务和促销服务访问频率比较大,因此加入了缓存机制等。

还有一种抽象出公共逻辑的方法是把这些公共逻辑做成公共的框架库。这种方法可以减少服务调用的性能损耗。但是这种方法的管理成本非常高昂,很难保证所有应用版本的一致性。

数据库拆分也有一些问题和挑战:比如说跨库级联的需求,通过服务查询数据颗粒度的粗细问题等。但是这些问题可以通过合理的设计来解决。总体来说,数据库拆分是一个利大于弊的。

微服务架构还有一个技术外的好处,它使整个系统的分工更加明确,责任更加清晰,每个人专心负责为其他人提供更好的服务。在单体应用的时代,公共的业务功能经常没有明确的归属。最后要么各做各的,每个人都重新实现了一遍;要么是随机一个人(一般是能力比较强或者比较热心的人)做到他负责的应用里面。在后者的情况下,这个人在负责自己应用之外,还要额外负责给别人提供这些公共的功能——而这个功能本来是无人负责的,仅仅因为他能力较强/比较热心,就莫名地背锅(这种情况还被美其名曰能者多劳)。结果最后大家都不愿意提供公共的功能。长此以往,团队里的人渐渐变得各自为政,不再关心全局的架构设计。

从这个角度上看,使用微服务架构同时也需要组织结构做相应的调整。所以说做微服务改造需要管理者的支持。

改造完成后,小明和小红分清楚各自的锅。两人十分满意,一切就像是麦克斯韦方程组一样漂亮完美。

然而……

没有银弹

春天来了,万物复苏,又到了一年一度的购物狂欢节。眼看着日订单数量蹭蹭地上涨,小皮小明小红喜笑颜开??上Ш镁安怀?,乐极生悲,突然嘣的一下,系统挂了。

以往单体应用,排查问题通常是看一下日志,研究错误信息和调用堆栈。而微服务架构整个应用分散成多个服务,定位故障点非常困难。小明一个台机器一台机器地查看日志,一个服务一个服务地手工调用。经过十几分钟的查找,小明终于定位到故障点:促销服务由于接收的请求量太大而停止响应了。其他服务都直接或间接地会调用促销服务,于是也跟着宕机了。在微服务架构中,一个服务故障可能会产生雪崩效用,导致整个系统故障。其实在节前,小明和小红是有做过请求量评估的。按照预计,服务器资源是足以支持节日的请求量的,所以肯定是哪里出了问题。不过形势紧急,随着每一分每一秒流逝的都是白花花的银子,因此小明也没时间排查问题,当机立断在云上新建了几台虚拟机,然后一台一台地部署新的促销服务节点。几分钟的操作后,系统总算是勉强恢复正常了。整个故障时间内估计损失了几十万的销售额,三人的心在滴血……

事后,小明简单写了个日志分析工具(量太大了,文本编辑器几乎打不开,打开了肉眼也看不过来),统计了促销服务的访问日志,发现在故障期间,商品服务由于代码问题,在某些场景下会对促销服务发起大量请求。这个问题并不复杂,小明手指抖一抖,修复了这个价值几十万的Bug。

问题是解决了,但谁也无法保证不会再发生类似的其他问题。微服务架构虽然逻辑设计上看是完美的,但就像积木搭建的华丽宫殿一样,经不起风吹草动。微服务架构虽然解决了旧问题,也引入了新的问题:

  • 微服务架构整个应用分散成多个服务,定位故障点非常困难。
  • 稳定性下降。服务数量变多导致其中一个服务出现故障的概率增大,并且一个服务故障可能导致整个系统挂掉。事实上,在大访问量的生产场景下,故障总是会出现的。
  • 服务数量非常多,部署、管理的工作量很大。
  • 开发方面:如何保证各个服务在持续开发的情况下仍然保持协同合作。
  • 测试方面:服务拆分后,几乎所有功能都会涉及多个服务。原本单个程序的测试变为服务间调用的测试。测试变得更加复杂。

小明小红痛定思痛,决心好好解决这些问题。对故障的处理一般从两方面入手,一方面尽量减少故障发生的概率,另一方面降低故障造成的影响。

576869-20190822202453947-452632447

监控 – 发现故障的征兆

在高并发分布式的场景下,故障经常是突然间就雪崩式爆发。所以必须建立完善的监控体系,尽可能发现故障的征兆。

微服务架构中组件繁多,各个组件所需要监控的指标不同。比如Redis缓存一般监控占用内存值、网络流量,数据库监控连接数、磁盘空间,业务服务监控并发数、响应延迟、错误率等。因此如果做一个大而全的监控系统来监控各个组件是不大现实的,而且扩展性会很差。一般的做法是让各个组件提供报告自己当前状态的接口(metrics接口),这个接口输出的数据格式应该是一致的。然后部署一个指标采集器组件,定时从这些接口获取并保持组件状态,同时提供查询服务。最后还需要一个UI,从指标采集器查询各项指标,绘制监控界面或者根据阈值发出告警。

大部分组件都不需要自己动手开发,网络上有开源组件。小明下载了RedisExporter和MySQLExporter,这两个组件分别提供了Redis缓存和MySQL数据库的指标接口。微服务则根据各个服务的业务逻辑实现自定义的指标接口。然后小明采用Prometheus作为指标采集器,Grafana配置监控界面和邮件告警。这样一套微服务监控系统就搭建起来了:

576869-20190822202505346-382977682

定位问题 – 链路跟踪

在微服务架构下,一个用户的请求往往涉及多个内部服务调用。为了方便定位问题,需要能够记录每个用户请求时,微服务内部产生了多少服务调用,及其调用关系。这个叫做链路跟踪。

我们用一个Istio文档里的链路跟踪例子来看看效果:

576869-20190822202716477-230389284

图片来自Istio文档

从图中可以看到,这是一个用户访问productpage页面的请求。在请求过程中,productpage服务顺序调用了details和reviews服务的接口。而reviews服务在响应过程中又调用了ratings的接口。整个链路跟踪的记录是一棵树:

576869-20190822202529745-761706189

要实现链路跟踪,每次服务调用会在HTTP的HEADERS中记录至少记录四项数据:

  • traceId:traceId标识一个用户请求的调用链路。具有相同traceId的调用属于同一条链路。
  • spanId:标识一次服务调用的ID,即链路跟踪的节点ID。
  • parentId:父节点的spanId。
  • requestTime & responseTime:请求时间和响应时间。

另外,还需要调用日志收集与存储的组件,以及展示链路调用的UI组件。

576869-20190822202538814-1365520338

 

以上只是一个极简的说明,关于链路跟踪的理论依据可详见Google的Dapper

了解了理论基础后,小明选用了Dapper的一个开源实现Zipkin。然后手指一抖,写了个HTTP请求的拦截器,在每次HTTP请求时生成这些数据注入到HEADERS,同时异步发送调用日志到Zipkin的日志收集器中。这里额外提一下,HTTP请求的拦截器,可以在微服务的代码中实现,也可以使用一个网络代理组件来实现(不过这样子每个微服务都需要加一层代理)。

链路跟踪只能定位到哪个服务出现问题,不能提供具体的错误信息。查找具体的错误信息的能力则需要由日志分析组件来提供。

分析问题 – 日志分析

日志分析组件应该在微服务兴起之前就被广泛使用了。即使单体应用架构,当访问数变大、或服务器规模增多时,日志文件的大小会膨胀到难以用文本编辑器进行访问,更糟的是它们分散在多台服务器上面。排查一个问题,需要登录到各台服务器去获取日志文件,一个一个地查找(而且打开、查找都很慢)想要的日志信息。

因此,在应用规模变大时,我们需要一个日志的“搜索引擎”。以便于能准确的找到想要的日志。另外,数据源一侧还需要收集日志的组件和展示结果的UI组件:

576869-20190822202551377-1925565690

小明调查了一下,使用了大名鼎鼎地ELK日志分析组件。ELK是Elasticsearch、Logstash和Kibana三个组件的缩写。

  • Elasticsearch:搜索引擎,同时也是日志的存储。
  • Logstash:日志采集器,它接收日志输入,对日志进行一些预处理,然后输出到Elasticsearch。
  • Kibana:UI组件,通过Elasticsearch的API查找数据并展示给用户。

最后还有一个小问题是如何将日志发送到Logstash。一种方案是在日志输出的时候直接调用Logstash接口将日志发送过去。这样一来又(咦,为啥要用“又”)要修改代码……于是小明选用了另一种方案:日志仍然输出到文件,每个服务里再部署个Agent扫描日志文件然后输出给Logstash。

网关 – 权限控制,服务治理

拆分成微服务后,出现大量的服务,大量的接口,使得整个调用关系乱糟糟的。经常在开发过程中,写着写着,忽然想不起某个数据应该调用哪个服务?;蛘咝赐崃?,调用了不该调用的服务,本来一个只读的功能结果修改了数据……

为了应对这些情况,微服务的调用需要一个把关的东西,也就是网关。在调用者和被调用者中间加一层网关,每次调用时进行权限校验。另外,网关也可以作为一个提供服务接口文档的平台。

使用网关有一个问题就是要决定在多大粒度上使用:最粗粒度的方案是整个微服务一个网关,微服务外部通过网关访问微服务,微服务内部则直接调用;最细粒度则是所有调用,不管是微服务内部调用或者来自外部的调用,都必须通过网关。折中的方案是按照业务领域将微服务分成几个区,区内直接调用,区间通过网关调用。

由于整个网上超市的服务数量还不算特别多,小明采用的最粗粒度的方案:
576869-20190822202601454-2140609469

 

服务注册于发现 – 动态扩容

前面的组件,都是旨在降低故障发生的可能性。然而故障总是会发生的,所以另一个需要研究的是如何降低故障产生的影响。

最粗暴的(也是最常用的)故障处理策略就是冗余。一般来说,一个服务都会部署多个实例,这样一来能够分担压力提高性能,二来即使一个实例挂了其他实例还能响应。

冗余的一个问题是使用几个冗余?这个问题在时间轴上并没有一个切确的答案。根据服务功能、时间段的不同,需要不同数量的实例。比如在平日里,可能4个实例已经够用;而在促销活动时,流量大增,可能需要40个实例。因此冗余数量并不是一个固定的值,而是根据需要实时调整的。

一般来说新增实例的操作为:

  1. 部署新实例
  2. 将新实例注册到负载均衡或DNS上

操作只有两步,但如果注册到负载均衡或DNS的操作为人工操作的话,那事情就不简单了。想想新增40个实例后,要手工输入40个IP的感觉……

解决这个问题的方案是服务自动注册与发现。首先,需要部署一个服务发现服务,它提供所有已注册服务的地址信息的服务。DNS也算是一种服务发现服务。然后各个应用服务在启动时自动将自己注册到服务发现服务上。并且应用服务启动后会实时(定期)从服务发现服务同步各个应用服务的地址列表到本地。服务发现服务也会定期检查应用服务的健康状态,去掉不健康的实例地址。这样新增实例时只需要部署新实例,实例下线时直接关停服务即可,服务发现会自动检查服务实例的增减。

 

576869-20190822202612906-90547951

服务发现还会跟客户端负载均衡配合使用。由于应用服务已经同步服务地址列表在本地了,所以访问微服务时,可以自己决定负载策略。甚至可以在服务注册时加入一些元数据(服务版本等信息),客户端负载则根据这些元数据进行流量控制,实现A/B测试、蓝绿发布等功能。

服务发现有很多组件可以选择,比如说Zookeeper 、Eureka、Consul、Etcd等。不过小明觉得自己水平不错,想炫技,于是基于Redis自己写了一个……

熔断、服务降级、限流

熔断

当一个服务因为各种原因停止响应时,调用方通?;岬却欢问奔?,然后超时或者收到错误返回。如果调用链路比较长,可能会导致请求堆积,整条链路占用大量资源一直在等待下游响应。所以当多次访问一个服务失败时,应熔断,标记该服务已停止工作,直接返回错误。直至该服务恢复正常后再重新建立连接。

576869-20190822202623628-671154877

图片来自《微服务设计

服务降级

当下游服务停止工作后,如果该服务并非核心业务,则上游服务应该降级,以保证核心业务不中断。比如网上超市下单界面有一个推荐商品凑单的功能,当推荐??楣伊撕?,下单功能不能一起挂掉,只需要暂时关闭推荐功能即可。

限流

一个服务挂掉后,上游服务或者用户一般会习惯性地重试访问。这导致一旦服务恢复正常,很可能因为瞬间网络流量过大又立刻挂掉,在棺材里重复着仰卧起坐。因此服务需要能够自我?;ぁ蘖?。限流策略有很多,最简单的比如当单位时间内请求数过多时,丢弃多余的请求。另外,也可以考虑分区限流。仅拒绝来自产生大量请求的服务的请求。例如商品服务和订单服务都需要访问促销服务,商品服务由于代码问题发起了大量请求,促销服务则只限制来自商品服务的请求,来自订单服务的请求则正常响应。

576869-20190822202634424-2040470592

测试

微服务架构下,测试分为三个层次:

  1. 端到端测试:覆盖整个系统,一般在用户界面机型测试。
  2. 服务测试:针对服务接口进行测试。
  3. 单元测试:针对代码单元进行测试。

三种测试从上到下实施的容易程度递增,但是测试效果递减。端到端测试最费时费力,但是通过测试后我们对系统最有信心。单元测试最容易实施,效率也最高,但是测试后不能保证整个系统没有问题。

 

576869-20190822210300615-890524557

由于端到端测试实施难度较大,一般只对核心功能做端到端测试。一旦端到端测试失败,则需要将其分解到单元测试:则分析失败原因,然后编写单元测试来重现这个问题,这样未来我们便可以更快地捕获同样的错误。

服务测试的难度在于服务会经常依赖一些其他服务。这个问题可以通过Mock Server解决:

 

576869-20190822210316819-714945851

单元测试大家都很熟悉了。我们一般会编写大量的单元测试(包括回归测试)尽量覆盖所有代码。

微服务框架

指标接口、链路跟踪注入、日志引流、服务注册发现、路由规则等组件以及熔断、限流等功能都需要在应用服务上添加一些对接代码。如果让每个应用服务自己实现是非常耗时耗力的?;贒RY的原则,小明开发了一套微服务框架,将与各个组件对接的代码和另外一些公共代码抽离到框架中,所有的应用服务都统一使用这套框架进行开发。

使用微服务框架可以实现很多自定义的功能。甚至可以将程序调用堆栈信息注入到链路跟踪,实现代码级别的链路跟踪?;蛘呤涑鱿叱坛?、连接池的状态信息,实时监控服务底层状态。

使用统一的微服务框架有一个比较严重的问题:框架更新成本很高。每次框架升级,都需要所有应用服务配合升级。当然,一般会使用兼容方案,留出一段并行时间等待所有应用服务升级。但是如果应用服务非常多时,升级时间可能会非常漫长。并且有一些很稳定几乎不更新的应用服务,其负责人可能会拒绝升级……因此,使用统一微服务框架需要完善的版本管理方法和开发管理规范。

另一条路 – Service Mesh

另一种抽象公共代码的方法是直接将这些代码抽象到一个反向代理组件。每个服务都额外部署这个代理组件,所有出站入站的流量都通过该组件进行处理和转发。这个组件被称为Sidecar。

Sidecar不会产生额外网络成本。Sidecar会和微服务节点部署在同一台主机上并且共用相同的虚拟网卡。所以sidecar和微服务节点的通信实际上都只是通过内存拷贝实现的。

576869-20190407233101603-682213801

图片来自:Pattern: Service Mesh

Sidecar只负责网络通信?;剐枰懈鲎榧赐骋还芾硭衧idecar的配置。在Service Mesh中,负责网络通信的部分叫数据平面(data plane),负责配置管理的部分叫控制平面(control plane)。数据平面和控制平面构成了Service Mesh的基本架构。

576869-20190407233125673-953968693

图片来自:Pattern: Service Mesh

Sevice Mesh相比于微服务框架的优点在于它不侵入代码,升级和维护更方便。它经常被诟病的则是性能问题。即使回环网络不会产生实际的网络请求,但仍然有内存拷贝的额外成本。另外有一些集中式的流量处理也会影响性能。

结束、也是开始

微服务不是架构演变的终点。往细走还有Serverless、FaaS等方向。另一方面也有人在唱合久必分分久必合,重新发现单体架构……

不管怎样,微服务架构的改造暂时告一段落了。

 

转载:https://www.cnblogs.com/skabyy/p/11396571.html

一文详解微服务架构,首发于nodejs。

]]>
http://www.baisifangcheng.com/node/archives/70/feed 0
聊天应用亲自尝试三之客户端php http://www.baisifangcheng.com/node/archives/57 http://www.baisifangcheng.com/node/archives/57#comments Wed, 29 Jun 2016 11:05:16 +0000 http://www.baisifangcheng.com/node/?p=57 我想把客户端的代码放入到php中,因为我如果完成一个聊天,可能会有如下场景:用php开发一个商城,里面有个和商 […]

聊天应用亲自尝试三之客户端php,首发于nodejs。

]]>
我想把客户端的代码放入到php中,因为我如果完成一个聊天,可能会有如下场景:用php开发一个商城,里面有个和商户聊天的场景,node代码我不变,只希望客户端的前端代码嵌入到php渲染的模板中。

我们新建一个php文件在同一个目录,叫index.php。并把客户端代码拷贝到里面:

<html>
  <head>
  
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
    <select id="suser">
    
     </select>
     <input type="hidden" id="selfname" />
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
  <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io("http://127.0.0.1:3000");
  
  //生成随机数
  sjMath= Math.floor(Math.random()*10000);
  $('#selfname').val(sjMath);
  //将随机数用户名发送到客户端
    socket.emit('add user', sjMath);
  
   socket.on('get user', function(msg){
	  
    $('#messages').append($('<li>').text("欢迎"+msg+"加入"));
  });  
    
	//获取所有服务器发来的用户名
   socket.on('get alluser', function(msg){
	   $('#suser').empty();
	   $('#suser').append("<option value='0'>群聊</option>"); 
	   	for ( var p in msg )
		{
    		$('#suser').append("<option value="+msg[p]+">"+msg[p]+"</option>"); 
        }  
  }); 
  
  
  
  $('form').submit(function(){
	 // alert($('#selfname').val(msg)+ $('suser').val());
    socket.emit('chat message', $('#m').val(),$('#selfname').val(),$('#suser').val());
	
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
  	//接收别人发来的信息
  socket.on('to '+$('#selfname').val(), function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
   //我给别人发的信息
  socket.on('send '+$('#selfname').val(), function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
  
  
  
</script>
<?php
echo "这是php文件";
?>
</html>

这里着注意的是我修改了var socket = io(“http://127.0.0.1:3000″);

因为iis指定到我们的inde.php后,浏览器访问php输入的url和端口号发生了改变,已经和node服务器端的url和端口不一样了。

你需要让你的php页面能够访问到node监听的服务。

20160629190413

聊天应用亲自尝试三之客户端php,首发于nodejs。

]]>
http://www.baisifangcheng.com/node/archives/57/feed 0
聊天应用亲自尝试二之私聊 http://www.baisifangcheng.com/node/archives/49 http://www.baisifangcheng.com/node/archives/49#comments Wed, 29 Jun 2016 04:20:06 +0000 http://www.baisifangcheng.com/node/?p=49 私聊有时很常见,例如我们购物时,和客户聊天,这种就是一个私聊场景。 我们模拟一个场景:用户打开网页后,客户端j […]

聊天应用亲自尝试二之私聊,首发于nodejs。

]]>
私聊有时很常见,例如我们购物时,和客户聊天,这种就是一个私聊场景。

我们模拟一个场景:用户打开网页后,客户端js会生成一个随机数作为这个用户的随机用户名,我们根据用户名的随机数创建不同的事件名称来对应不同的客户端交互,这么用户名会保存在服务器端数组里以便逻辑使用。你可能还没听明白,下面就来看看如何具体的操作吧。

首先我们在客户端的index.html创建随机数并发送到服务器:

var socket = io();
  
  //生成随机数
  sjMath= Math.floor(Math.random()*10000);
  
  //将随机数用户名发送到客户端
    socket.emit('add user', sjMath);

服务器接收此事件:

var userarray= {} 

io.on('connection', function(socket){

  //获取随机数用户名	
  socket.on('add user', function(msg){
	  //添加到用户数组并发送给所有人
	  userarray[msg] = msg;
    io.emit('get user', msg);
  });
});

客户端还需要接收get user的信息:

//将随机数用户名发送到客户端
    socket.emit('add user', sjMath);
  
   socket.on('get user', function(msg){
    $('#messages').append($('<li>').text("欢迎"+msg+"加入"));
  });

命令行重启node index.js,刷新浏览器你会看到

20160629112223

多开几个页面你会看到他们依次被载入。

提示:我们可以加入一下代码,查看用户是否正确加载到node中

io.on('connection', function(socket){
	console.log('a user connected.');
	
	//查看现有数组
	 console.log(userarray);

 

私聊代码开始了

下面我们正式进入私聊代码中,既然客户端已经收到了发来的随机用户,我们把这个随机用户名加入到一个表单的下拉列表中,私聊中选择用户使用:

//获取随机数用户名	
  socket.on('add user', function(msg){
	  //添加到用户数组并发送给所有人
	  userarray[msg] = msg;
	 
    io.emit('get user', msg);
	
	//发送所有人的用户名
	io.emit('get alluser', userarray);
  });

在服务器获取用户名处添加,给客户端发送所有的人的事件

客户端实时接收此事件:

//获取所有服务器发来的用户名
   socket.on('get alluser', function(msg){
       $('#suser').empty();
       for ( var p in msg )
       {
    	   $('#suser').append("<option value="+msg[p]+">"+msg[p]+"</option>"); 
       }  
  });

好,重启node index.js 刷新页面:

20160629121831

下面我添加一个群聊选项好保存原来的群聊应用。

//获取所有服务器发来的用户名
 socket.on('get alluser', function(msg){
	   $('#suser').empty();
	   $('#suser').append("<option value='0'>群里</option>"); 
	   	for ( var p in msg )
		{
    		$('#suser').append("<option value="+msg[p]+">"+msg[p]+"</option>"); 
        }  
  });

 

改写客户端想服务器传送的参数

因为我们需要传给服务器:发送者和接收者的用户名和要传递的消息。

客户端代码如下:

$('form').submit(function(){
	 // alert($('#selfname').val(msg)+ $('suser').val());
    socket.emit('chat message', $('#m').val(),$('#selfname').val(),$('#suser').val());
	
    $('#m').val('');
    return false;
  });

你会问selfname是什么?是我们用来记录你用户名的一个隐藏input:

<input type="hidden" id="selfname" />
...... 
 //生成随机数
  sjMath= Math.floor(Math.random()*10000);
  $('#selfname').val(sjMath);

下面书写服务端代码:

socket.on('chat message', function(msg,sendusername,tousername){
	 
	  if(tousername == 0){
	     io.emit('chat message', msg);
	  }else{
	      if(tousername in userarray){
			  console.log("接收方"+tousername);
			  console.log("发送方"+sendusername);
			  //对方用户
		       io.emit('to '+tousername, sendusername+":"+msg); 
			   //发送者本人
		       io.emit('send '+sendusername, sendusername+":"+msg); 
		  }
	  
	  }
    
  });

服务端做了判断,如果用户存在则发送消息给相应的事件:

//对方用户
 io.emit('to '+tousername, sendusername+":"+msg); 
 //发送者本人
 io.emit('send '+sendusername, sendusername+":"+msg);

这里的关键是这两个消息的发送事件,他们根据用户名来组成。

客户端会用同样的原理接收服务器发来的这个消息事件:

//接收别人发来的信息
  socket.on('to '+$('#selfname').val(), function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
   //我给别人发的信息
  socket.on('send '+$('#selfname').val(), function(msg){
    $('#messages').append($('<li>').text(msg));
  });

好了,可以测试最终的结果了(大牛逼呀)

20160629181425

别忘了,重启node index.js 在测试,(图片中的群里==群聊-打错了,懒得换图了)。

下面是index.html和index.js的全部代码:

<html>
<head>
<title>Socket.IO chat</title>
<style>
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font: 13px Helvetica, Arial;
}
form {
	background: #000;
	padding: 3px;
	position: fixed;
	bottom: 0;
	width: 100%;
}
form input {
	border: 0;
	padding: 10px;
	width: 90%;
	margin-right: .5%;
}
form button {
	width: 9%;
	background: rgb(130, 224, 255);
	border: none;
	padding: 10px;
}
#messages {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#messages li {
	padding: 5px 10px;
}
#messages li:nth-child(odd) {
	background: #eee;
}
</style>
</head>
<body>
<ul id="messages">
</ul>
<form action="">
  <select id="suser">
  </select>
  <input type="hidden" id="selfname" />
  <input id="m" autocomplete="off" />
  <button>Send</button>
</form>
</body>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  
  //生成随机数
  sjMath= Math.floor(Math.random()*10000);
  $('#selfname').val(sjMath);
  //将随机数用户名发送到客户端
    socket.emit('add user', sjMath);
  
   socket.on('get user', function(msg){
	  
    $('#messages').append($('<li>').text("欢迎"+msg+"加入"));
  });  
    
	//获取所有服务器发来的用户名
   socket.on('get alluser', function(msg){
	   $('#suser').empty();
	   $('#suser').append("<option value='0'>群聊</option>"); 
	   	for ( var p in msg )
		{
    		$('#suser').append("<option value="+msg[p]+">"+msg[p]+"</option>"); 
        }  
  }); 
  
  
  
  $('form').submit(function(){
	 // alert($('#selfname').val(msg)+ $('suser').val());
    socket.emit('chat message', $('#m').val(),$('#selfname').val(),$('#suser').val());
	
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
  	//接收别人发来的信息
  socket.on('to '+$('#selfname').val(), function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
   //我给别人发的信息
  socket.on('send '+$('#selfname').val(), function(msg){
    $('#messages').append($('<li>').text(msg));
  });
  
  
  
  
</script>
</html>

index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var userarray= {} 

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
	console.log('a user connected.');
	
	//查看现有数组
	 console.log(userarray);


  //获取随机数用户名	
  socket.on('add user', function(msg){
	  //添加到用户数组并发送给所有人
	  userarray[msg] = msg;
	 
    io.emit('get user', msg);
	
	//发送所有人的用户名
	io.emit('get alluser', userarray);
  });
	
	
  socket.on('chat message', function(msg,sendusername,tousername){
	 
	  if(tousername == 0){
	     io.emit('chat message', msg);
	  }else{
	      if(tousername in userarray){
			  console.log("接收方"+tousername);
			  console.log("发送方"+sendusername);
			  //对方用户
		       io.emit('to '+tousername, sendusername+":"+msg); 
			   //发送者本人
		       io.emit('send '+sendusername, sendusername+":"+msg); 
		  }
	  }
  }); 
});
http.listen(3000, function(){
  console.log('listening on *:3000');
});

 

 

 

 

 

 

 

 

 

 

聊天应用亲自尝试二之私聊,首发于nodejs。

]]>
http://www.baisifangcheng.com/node/archives/49/feed 0
聊天应用亲自尝试一之基础篇 http://www.baisifangcheng.com/node/archives/28 http://www.baisifangcheng.com/node/archives/28#comments Tue, 28 Jun 2016 02:56:34 +0000 http://www.baisifangcheng.com/node/?p=28 看了socket.io官网的案例,想自己照猫画虎完成以便,已达到深入理解和练习的目的。 使用web框架 exp […]

聊天应用亲自尝试一之基础篇,首发于nodejs。

]]>
看了socket.io官网的案例,想自己照猫画虎完成以便,已达到深入理解和练习的目的。

使用web框架 express

首要目标是建立一个简单的HTML页面,包括一个表单和一个消息列表,我们将使用Node.JS web 框架 express 去搭建。请先确保Node.JS 已经安装。

现在我们一步一步完成express的安装:(有个中文网站)

创建一个目录,然后进入此目录并将其作为当前工作目录:

$ mkdir myapp
$ cd myapp

通过 npm init 命令为你的应用创建一个 package.json 文件。 欲了解 package.json 是如何起作用的,请参考 Specifics of npm’s package.json handling。

$ npm init

此命令将要求你输入几个参数,例如此应用的名称和版本。 你可以直接按“回车”键接受默认设置即可,下面这个除外:

entry point: (index.js)

键入 app.js 或者你所希望的名称,这是当前应用的入口文件。如果你希望采用默认的 index.js 文件名,只需按“回车”键即可。

接下来安装 Express 并将其保存到依赖列表中:

$ npm install express --save

我们看到了一个node_modules文件生成出来,这就是我们需要的。

如果只是临时安装 Express,不想将它添加到依赖列表中,只需略去 --save 参数即可:

$ npm install express

安装 Node ??槭?,如果指定了 --save 参数,那么此??榻惶砑拥?package.json 文件中 dependencies 依赖列表中。 然后通过 npm install 命令即可自动安装依赖列表中所列出的所有???。

现在我们在index.js这个入口文件中,输入以下代码:

var app = require('express')();
//Express初始化app为一个处理请求HTTP服务的程序。
var http = require('http').Server(app);

//定义一个路由/访问网站根目录
app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

//监听HTTP服务器端口3000
http.listen(3000, function(){
  console.log('listening on *:3000');
});

运行 node index.js

命令行输出:

listening on *:3000

紧接着我们用浏览器访问http://127.0.0.1:3000

20160628102756

 

制作html文件并渲染

我们该创建一个独立的html文件来包含我们的样式和布局

创建一个index.html

<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>

改写index.js入口文件

.....
app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

上面我们使用sendFile渲染模板,使其访问路由并正确加载index.html.

重启进程(ctrl+C并再次运行node index)并且刷新浏览器.

20160628121528

加入Socket.io

socket.io有两个部分组成:(?官网)

1.服务器端供node使用的socket???/p>

2.客户端使用的js包

下一步我们需要安装node要使用的socket.io???/p>

npm install --save socket.io

上面的命令将安装socket.io???,并将它写入配置文件package.json。下面我们修改我们的index.js:

var app = require('express')();
var http = require('http').Server(app);

//通过http协议初始化socket.io
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendfile('index.html');
});

//监听socket连接事件
io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

注意,我通过使用http(http服务器)对象来初始化一个socket.io实例。接着监听socket连接事件,并将它输出到控制台。

然后在index.html</body>之前加入以下片段:

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>

客户端加载socket.io-client,在全局调用io()并连接服务端。

注意,当我们调用io()时没有指定任何一个URL,因为它默认去尝试连接主机。

如果你现在重载服务器和客户端,控制台打印“a user connected”。

尝试打开多个页面,你将看到如:

20160628203455

每个socket也触发特殊的disconnect事件。也就是断开的事件

io.on('connection', function(socket){
  console.log('a user connected');
 //断开连接事件
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});

当你关闭一个页面你会看到

20160628203911

 

发送信息

Socket.IO背后的主要思想是:你可以发送和接收任何你想要的事件和数据。任何被编码为JSON的对象,二进制数据也支持。

我们现在模拟用户在客户端输入一条消息,服务器获取消息??突Ф嘶岫ㄒ逡桓鯿hat message事件emit发送到服务器端,服务器端接收chat message事件。html中代码如下:

<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
</script>

同时在index.js中接收chat message事件,并打印消息:

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    console.log('message: ' + msg);
  });
});

看看效果吧:

20160628232026

 

通知客户端

下一步就是服务器接收消息,并把消息发送给其他用户。

为了发送给每一个人,Socket.IO提供io.emit了给我们,现在为了简单起见,我们发送消息给每个人,包括发送者自己。以下是服务器端代码

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});

客户端我们捕获chat message事件??突Ф巳康?JavaScript 代码如下:

<script>
  var socket = io();
  $('form').submit(function(){
    socket.emit('chat message', $('#m').val());
    $('#m').val('');
    return false;
  });
  socket.on('chat message', function(msg){
    $('#messages').append($('<li>').text(msg));
  });
</script>

最终效果如下

20160628234000

聊天应用亲自尝试一之基础篇,首发于nodejs。

]]>
http://www.baisifangcheng.com/node/archives/28/feed 0
node安装 http://www.baisifangcheng.com/node/archives/20 http://www.baisifangcheng.com/node/archives/20#comments Tue, 28 Jun 2016 01:37:23 +0000 http://www.baisifangcheng.com/node/?p=20 我使用的是win10系统,我就用win10系统来介绍。 首先我们来到nodejs的官方网站:https://n […]

node安装,首发于nodejs。

]]>
我使用的是win10系统,我就用win10系统来介绍。

首先我们来到nodejs的官方网站:https://nodejs.org,node官网会自动识别你的系统和你需要的node,下载他们,并安装。很容吧

20160628094408

安装完成后,node会自动添加环境变量,这个你不用操心了。

接下来我们打开命令行输入:node -v 命令,可查看相应的node版本。

20160628094748

ok了安装完毕,我们写个hello world,体验一下吧。

随便找个目录,创建一个example.js文件

//加载http???
const http = require('http');

//设置主机名
const hostname = '127.0.0.1';
//设置端口号
const port = 3000;

//创建一个HTTP服务,req为请求对象,res为响应对象
const server = http.createServer((req, res) => {
  // 设置相应的状态码(200 – 服务器成功返回网页)
  res.statusCode = 200;
  
  res.setHeader('Content-Type', 'text/plain');
  //给客户端发送消息
  res.end('Hello World\n');
});

//监听接口,打印命令行日志
server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

要想启动运行的服务,需要输入

$ node example.js
Server running at http://127.0.0.1:3000/

下面打开浏览器,输入

http://127.0.0.1:3000/

20160628102756

可在命令工具敲击 [Ctrl]+[c] 推出服务

node安装,首发于nodejs。

]]>
http://www.baisifangcheng.com/node/archives/20/feed 0
三篇文章让你玩转node聊天 http://www.baisifangcheng.com/node/archives/13 http://www.baisifangcheng.com/node/archives/13#comments Mon, 27 Jun 2016 10:18:29 +0000 http://www.baisifangcheng.com/node/?p=13 node因为其卓越的websocket处理能力,而被很多人推崇,那么有三个教程来看看node如何完成一些聊天程 […]

三篇文章让你玩转node聊天,首发于nodejs。

]]>
node因为其卓越的websocket处理能力,而被很多人推崇,那么有三个教程来看看node如何完成一些聊天程序

1.?socket.io 官网翻译1——Get started/chat

socket.io借助node和express完成基本的聊天应用的教程,讲解详细很实用

2.?Node.js + Web Socket 打造即时聊天程序嗨聊

结合上面的基础,更深一步完成了,聊天应用

3.?详细讲解nodejs中使用socket的私聊的方式

增加私聊的处理方式和思路

有了上面的这三个样例,我想你已经明白了和玩转了node的聊天系统。

三篇文章让你玩转node聊天,首发于nodejs。

]]>
http://www.baisifangcheng.com/node/archives/13/feed 0
手机版斗牛