标签： 技术

WebSocket 是什么原理（知乎上的很搞笑）

leokim / / HTML, 前端, 技术

作者：Ovear
链接：https://www.zhihu.com/question/20215561/answer/40316953
来源：知乎

一、WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）
首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解

有交集，但是并不是全部。
另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。
通俗来说，你可以用HTTP协议传输非Html数据，就是这样=。=
再简单来说，层级不一样。

二、Websocket是什么样的协议，具体有什么优点
首先，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。
简单的举个例子吧，用目前应用比较广泛的PHP生命周期来解释。
1) HTTP的生命周期通过Request来界定，也就是一个Request 一个Response，那么在HTTP1.0中，这次HTTP请求就结束了。
在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。
但是请记住 Request = Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。

教练，你BB了这么多，跟Websocket有什么关系呢？
_(:з」∠)_好吧，我正准备说Websocket呢。。
首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
在握手阶段是一样的
——-以下涉及专业技术内容，不想看的可以跳过lol:，或者只看加黑内容——–
首先我们来看个典型的Websocket握手（借用Wikipedia的。。）

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

熟悉HTTP的童鞋可能发现了，这段类似HTTP协议的握手请求中，多了几个东西。
我会顺便讲解下作用。

Upgrade: websocket
Connection: Upgrade

这个就是Websocket的核心了，告诉Apache、Nginx等服务器：注意啦，窝发起的是Websocket协议，快点帮我找到对应的助理处理~不是那个老土的HTTP。

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

首先，Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠窝，我要验证尼是不是真的是Websocket助理。
然后，Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
最后，Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft（协议版本），在最初的时候，Websocket协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么Firefox和Chrome用的不是一个版本之类的，当初Websocket协议太多可是一个大难题。。不过现在还好，已经定下来啦~大家都使用的一个东西~ 脱水：服务员，我要的是13岁的噢→_→

然后服务器会返回下列东西，表示已经接受到请求， 成功建立Websocket啦！

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

这里开始就是HTTP最后负责的区域了，告诉客户，我已经成功切换协议啦~

Upgrade: websocket
Connection: Upgrade

依然是固定的，告诉客户端即将升级的是Websocket协议，而不是mozillasocket，lurnarsocket或者shitsocket。
然后，Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。服务器：好啦好啦，知道啦，给你看我的ID CARD来证明行了吧。。
后面的，Sec-WebSocket-Protocol 则是表示最终使用的协议。

至此，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行了。
具体的协议就不在这阐述了。
——————技术解析部分完毕——————

你TMD又BBB了这么久，那到底Websocket有什么鬼用，http long poll，或者ajax轮询不都可以实现实时信息传递么。

好好好，年轻人，那我们来讲一讲Websocket有什么用。
来给你吃点胡（苏）萝（丹）卜（红）

三、Websocket的作用
在讲Websocket之前，我就顺带着讲下 long poll 和 ajax轮询 的原理。
首先是 ajax轮询 ，ajax轮询 的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
场景再现：
客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：没有。。（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：你好烦啊，没有啊。。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：好啦好啦，有啦给你。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：。。。。。没。。。。没。。。没有（Response） —- loop

long poll
long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
场景再现
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。   等待到有消息的时候。。来 给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop

从上面可以看出其实这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。
简单地说就是，服务器是一个很懒的冰箱（这是个梗）（不会、不能主动发起连接），但是上司有命令，如果有客户来，不管多么累都要好好接待。

说完这个，我们再来说一说上面的缺陷（原谅我废话这么多吧OAQ）
从上面很容易看出来，不管怎么样，上面这两种都是非常消耗资源的。
ajax轮询 需要服务器有很快的处理速度和资源。（速度）
long poll 需要有很高的并发，也就是说同时接待客户的能力。（场地大小）
所以ajax轮询 和long poll 都有可能发生这种情况。

客户端：啦啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）
客户端：。。。。好吧，啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）

客户端：

然后服务端在一旁忙的要死：冰箱，我要更多的冰箱！更多。。更多。。（我错了。。这又是梗。。）

————————–
言归正传，我们来说Websocket吧
通过上面这个例子，我们可以看出，这两种方式都不是最好的方式，需要很多资源。
一种需要更快的速度，一种需要更多的'电话'。这两种都会导致'电话'的需求越来越高。
哦对了，忘记说了HTTP还是一个无状态协议。（感谢评论区的各位指出OAQ）
通俗的说就是，服务器因为每天要接待太多客户了，是个健忘鬼，你一挂电话，他就把你的东西全忘光了，把你的东西全丢掉了。你第二次还得再告诉服务器一遍。

所以在这种情况下出现了，Websocket出现了。
他解决了HTTP的这几个难题。
首先，被动性，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端啦。
所以上面的情景可以做如下修改。
客户端：啦啦啦，我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）
服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：balabalabalabala
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
服务端：笑死我了哈哈哈哈哈哈哈

就变成了这样，只需要经过一次HTTP请求，就可以做到源源不断的信息传送了。（在程序设计中，这种设计叫做回调，即：你有信息了再来通知我，而不是我傻乎乎的每次跑来问你）
这样的协议解决了上面同步有延迟，而且还非常消耗资源的这种情况。
那么为什么他会解决服务器上消耗资源的问题呢？
其实我们所用的程序是要经过两层代理的，即HTTP协议在Nginx等服务器的解析下，然后再传送给相应的Handler（PHP等）来处理。
简单地说，我们有一个非常快速的接线员（Nginx），他负责把问题转交给相应的客服（Handler）。
本身接线员基本上速度是足够的，但是每次都卡在客服（Handler）了，老有客服处理速度太慢。，导致客服不够。
Websocket就解决了这样一个难题，建立后，可以直接跟接线员建立持久连接，有信息的时候客服想办法通知接线员，然后接线员在统一转交给客户。
这样就可以解决客服处理速度过慢的问题了。

同时，在传统的方式上，要不断的建立，关闭HTTP协议，由于HTTP是非状态性的，每次都要重新传输identity info（鉴别信息），来告诉服务端你是谁。
虽然接线员很快速，但是每次都要听这么一堆，效率也会有所下降的，同时还得不断把这些信息转交给客服，不但浪费客服的处理时间，而且还会在网路传输中消耗过多的流量/时间。
但是Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求，这样就解决了接线员要反复解析HTTP协议，还要查看identity info的信息。
同时由客户主动询问，转换为服务器（推送）有信息的时候就发送（当然客户端还是等主动发送信息过来的。。），没有信息的时候就交给接线员（Nginx），不需要占用本身速度就慢的客服（Handler）了
——————–
至于怎么在不支持Websocket的客户端上使用Websocket。。答案是：不能
但是可以通过上面说的 long poll 和 ajax 轮询来 模拟出类似的效果

如何用命令将本地项目上传到git

leokim / / 技术

1、（先进入项目文件夹）通过命令 git init 把这个目录变成git可以管理的仓库

git init

2、把文件添加到版本库中，使用命令 git add .添加到暂存区里面去，不要忘记后面的小数点“.”，意为添加文件夹下的所有文件

git add .

3、用命令 git commit告诉Git，把文件提交到仓库。引号内为提交说明

git commit -m 'first commit'

4、关联到远程库

git remote add origin 你的远程库地址

如：

git remote add origin https://github.com/cade8800/ionic-demo.git

5、获取远程库与本地同步合并（如果远程库不为空必须做这一步，否则后面的提交会失败）

git pull --rebase origin master

6、把本地库的内容推送到远程，使用 git push命令，实际上是把当前分支master推送到远程。执行此命令后会要求输入用户名、密码，验证通过后即开始上传。

git push -u origin master

*、状态查询命令

git status

备：详细请参考 http://www.cnblogs.com/tugenhua0707/p/4050072.html

 

laravel5集成angular2

leokim / / PHP, 前端, 技术

这个问题我之前一直在思考

学习angular的过程中都是把angular视为一个完整的前端存在

也就是脱离了后端的独立存在

在代码里不去插入动态语言

在前端完成数据的存储，通信，绑定，修改

与后端可以用http协议交互，像app一样只做展示的前端操作

angular2通过ng server创建http服务

我想要把angular2结合laravel5一起使用

开始我觉得是不是angular2就像上面说的那样还是通过ng server创建服务

运行在4200端口 然后nginx反向代理到4200端口访问angular

然后angular通过http协议与laravel后端通信

google了之后发现使用angular2的开发模式（development mode）可以直接使用

而之前ng server只是单独为了让程序跑起来提供的一个服务

如今又laravel了 就可以不用创建那个服务 直接在这个上面跑

哎 还是基础不好思维有限 慢慢补吧

让我们开始吧！首先要安装基础laravel应用

image.png

我们需要获取angular2和typescript源码

在新创建的文件夹（larangular）中可以看到package.json文件

修改

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "npm run watch -- --watch-poll",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "vue": "^2.1.10",
    "concurrently": "^1.0.0",
    "del": "^2.2.0",
    "gulp": "^3.8.8"
  },
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "bootstrap-sass": "^3.0.0",
    "elixir-typescript": "^1.1.2",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "laravel-elixir": "^4.0.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "0.19.6",
    "zone.js": "0.5.10"
  }
}

现在执行npm install,所需要的文件将被下载到node_modules文件夹

image.png

完成之后，我们要添加Typescript在laravel项目的resouce/assets目录

在这个文件夹里我们要创建2个文件app.component.ts 和 boot.ts

import {Component} from 'angular2/core';
 
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
import {bootstrap}    from 'angular2/platform/browser'
import {AppComponent} from './app.component'
 
bootstrap(AppComponent);

下面我们需要编写一个简单的Elixir task来完成Typescript

在主文件夹中创建gulpfile.js

var elixir = require('laravel-elixir');
var elixirTypscript = require('elixir-typescript');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss');

    mix.copy('node_modules/angular2', 'public/angular2');
    mix.copy('node_modules/rxjs', 'public/rxjs');
    mix.copy('node_modules/systemjs', 'public/systemjs');
    mix.copy('node_modules/es6-promise', 'public/es6-promise');
    mix.copy('node_modules/es6-shim', 'public/es6-shim');
    mix.copy('node_modules/zone.js', 'public/zone.js');

    mix.typescript('app.js','public/','/**/*.ts',{
        "target": "ES5",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
    });

});

然后安装gulp

image.png

修改如下文件 node_modules/elixir_typescript/index.js 

new Task(pluginName, function () {
       var tsResult = gulp.src(assetPath + search)
           .pipe(ts(options, undefined, _laravelReporter.ElixirMessage()));
       return tsResult
           //  .pipe(concat(outputFileName))
             .pipe(gulp.dest(outputFolder));


   })

如果不修改会出现下面的错误

image.png

现在在程序根目录下执行gulp

image.png

全部执行完成

修改views

<!doctype html>
<html lang="{{ config('app.locale') }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Raleway', sans-serif;
                font-weight: 100;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 12px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>

        <script src="es6-shim/es6-shim.min.js"></script>
        <script src="systemjs/dist/system-polyfills.js"></script>
         
        <script src="angular2/bundles/angular2-polyfills.js"></script>
        <script src="systemjs/dist/system.src.js"></script>
        <script src="rxjs/bundles/Rx.js"></script>
        <script src="angular2/bundles/angular2.dev.js"></script>

        <script>
            System.config({
              "defaultJSExtensions": true,
              packages: {
                app: {
                  format: 'register',
                  defaultExtension: 'js'
                }
              }
            });
         
         
            System.import('typescript/boot')
                  .then(null, console.error.bind(console));
          </script>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @if (Auth::check())
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ url('/login') }}">Login</a>
                        <a href="{{ url('/register') }}">Register</a>
                    @endif
                </div>
            @endif

            <div>
                <div class="title m-b-md">
                    Laravel
                </div>
                <my-app>Loading...</my-app>

                <div>
                    <a href="https://laravel.com/docs">Documentation</a>
                    <a href="https://laracasts.com">Laracasts</a>
                    <a href="https://laravel-news.com">News</a>
                    <a href="https://forge.laravel.com">Forge</a>
                    <a href="https://github.com/laravel/laravel">GitHub</a>
                </div>
            </div>
        </div>
    </body>
</html>

成功了！！！

image.png

我把它放在了这里

https://git.oschina.net/iamleokim/larangular.git

nginx、swoole高并发原理初探

leokim / / Ngnix, PHP, 技术

一、阅前热身

为了更加形象的说明同步异步、阻塞非阻塞，我们以小明去买奶茶为例。

1、同步与异步

①同步与异步的理解

同步与异步的重点在消息通知的方式上，也就是调用结果通知的方式。

  • 同步当一个同步调用发出去后，调用者要一直等待调用结果的通知后，才能进行后续的执行

  • 异步：当一个异步调用发出去后，调用者不能立即得到调用结果的返回。

异步调用，要想获得结果，一般有两种方式：
1、主动轮询异步调用的结果;
2、被调用方通过callback来通知调用方调用结果。

②：生活实例

同步买奶茶：小明点单交钱，然后等着拿奶茶；异步买奶茶：小明点单交钱，店员给小明一个小票，等小明奶茶做好了，再来取。

异步买奶茶，小明要想知道奶茶是否做好了，有两种方式：
1、小明主动去问店员，一会就去问一下：“奶茶做好了吗？”…直到奶茶做好。
2、等奶茶做好了，店员喊一声：“小明，奶茶好了！”，然后小明去取奶茶。

2、阻塞与非阻塞

①阻塞与非阻塞的理解

阻塞与非阻塞的重点在于进/线程等待消息时候的行为，也就是在等待消息的时候，当前进/线程是挂起状态，还是非挂起状态。

  • 阻塞阻塞调用在发出去后，在消息返回之前，当前进/线程会被挂起，直到有消息返回，当前进/线程才会被激活.

  • 非阻塞非阻塞调用在发出去后，不会阻塞当前进/线程，而会立即返回。

②：生活实例

阻塞买奶茶：小明点单交钱，干等着拿奶茶，什么事都不做；非阻塞买奶茶：小明点单交钱，等着拿奶茶，等的过程中，时不时刷刷微博、朋友圈…

3、总结

通过上面的分析，我们可以得知：

同步与异步，重点在于消息通知的方式;阻塞与非阻塞，重点在于等消息时候的行为。

所以，就有了下面4种组合方式

  • 同步阻塞：小明在柜台干等着拿奶茶；

  • 同步非阻塞：小明在柜台边刷微博边等着拿奶茶；

  • 异步阻塞：小明拿着小票啥都不干，一直等着店员通知他拿奶茶；

  • 异步非阻塞：小明拿着小票，刷着微博，等着店员通知他拿奶茶。

二、Nginx如何处理高并发

1、Apache面对高并发，为什么很无力？

Apache处理一个请求是同步阻塞的模式。

每到达一个请求，Apache都会去fork一个子进程去处理这个请求，直到这个请求处理完毕。

面对低并发，这种模式没什么缺点，但是，面对高并发，就是这种模式的软肋了。

  • 1个客户端占用1个进程，那么，进程数量有多少，并发处理能力就有多少，但操作系统可以创建的进程数量是有限的。

  • 多进程就会有进程间的切换问题，而进程间的切换调度势必会造成CPU的额外消耗。当进程数量达到成千上万的时候，进程间的切换就占了CPU大部分的时间片，而真正进程的执行反而占了CPU的一小部分，这就得不偿失了。

下面，举例说明这2种场景是多进程模式的软肋：

  • 及时消息通知程序比如及时聊天程序，一台服务器可能要维持数十万的连接(典型的C10K问题)，那么就要启动数十万的进程来维持。这显然不可能。

  • 调用外部Http接口时假设Apache启动100个进程来处理请求，每个请求消耗100ms，那么这100个进程能提供1000qps。

但是，在我们调用外部Http接口时，比如QQ登录、微博登录，耗时较长，假设一个请求消耗10s，也就是1个进程1s处理0.1个请求，那么100个进程只能达到10qps，这样的处理能力就未免太差了。

注：什么是C10K问题？网络服务在处理数以万计的客户端连接时，往往出现效率低下甚至完全瘫痪，这被称为C10K问题。（concurrent 10000 connection）

综上，我们可以看出，Apache是同步阻塞的多进程模式，面对高并发等一些场景，是很苍白的。

2、Nginx何以问鼎高并发？

传统的服务器模型就是这样，因为其同步阻塞的多进程模型，无法面对高并发。
那么，有没有一种方式，可以让我们在一个进程处理所有的并发I/O呢？
答案是有的，这就是I/O复用技术。

①、I/O复用是神马？

最初级的I/O复用

所谓的I/O复用，就是多个I/O可以复用一个进程。

上面说的同步阻塞的多进程模型不适合处理高并发，那么，我们再来考虑非阻塞的方式。

采用非阻塞的模式，当一个连接过来时，我们不阻塞住，这样一个进程可以同时处理多个连接了。

比如一个进程接受了10000个连接，这个进程每次从头到尾的问一遍这10000个连接：“有I/O事件没？有的话就交给我处理，没有的话我一会再来问一遍。”
然后进程就一直从头到尾问这10000个连接，如果这1000个连接都没有I/O事件，就会造成CPU的空转，并且效率也很低，不好不好。

升级版的I/O复用

上面虽然实现了基础版的I/O复用，但是效率太低了。于是伟大的程序猿们日思夜想的去解决这个问题…终于！

我们能不能引入一个代理，这个代理可以同时观察许多I/O流事件呢？

当没有I/O事件的时候，这个进程处于阻塞状态；当有I/O事件的时候，这个代理就去通知进程醒来？

于是，早期的程序猿们发明了两个代理—select、poll。

select、poll代理的原理是这样的：

当连接有I/O流事件产生的时候，就会去唤醒进程去处理。

但是进程并不知道是哪个连接产生的I/O流事件，于是进程就挨个去问：“请问是你有事要处理吗？”……问了99999遍，哦，原来是第100000个进程有事要处理。那么，前面这99999次就白问了，白白浪费宝贵的CPU时间片了！痛哉，惜哉…

注:select与poll原理是一样的，只不过select只能观察1024个连接，poll可以观察无限个连接。

上面看了，select、poll因为不知道哪个连接有I/O流事件要处理，性能也挺不好的。

那么，如果发明一个代理，每次能够知道哪个连接有了I/O流事件，不就可以避免无意义的空转了吗？

于是，超级无敌、闪闪发光的epoll被伟大的程序员发明出来了。

epoll代理的原理是这样的：

当连接有I/O流事件产生的时候，epoll就会去告诉进程哪个连接有I/O流事件产生，然后进程就去处理这个进程。

如此，多高效！

②、基于epoll的Nginx

有了epoll，理论上1个进程就可以无限数量的连接，而且无需轮询，真正解决了c10k的问题。

Nginx是基于epoll的，异步非阻塞的服务器程序。自然，Nginx能够轻松处理百万级的并发连接，也就无可厚非了。

三、swoole如何处理高并发以及异步I/O的实现

1、swoole介绍

swoole是PHP的一个扩展。
简单理解：swoole=异步I/O+网络通信
PHPer可以基于swoole去实现过去PHP无法实现的功能。
具体请参考swoole官网：swoole官网

2、swoole如何处理高并发

①Reactor模型介绍

IO复用异步非阻塞程序使用经典的Reactor模型，Reactor顾名思义就是反应堆的意思，它本身不处理任何数据收发。只是可以监视一个socket(也可以是管道、eventfd、信号)句柄的事件变化。

注:什么是句柄？句柄英文为handler，可以形象的比喻为锅柄、勺柄。也就是资源的唯一标识符、资源的ID。通过这个ID可以操作资源。

Reactor只是一个事件发生器，实际对socket句柄的操作，如connect/accept、send/recv、close是在callback中完成的。

②swoole的架构

swoole采用 多线程Reactor+多进程Worker

swoole的架构图如下：

swoole的处理连接流程图如下：

当请求到达时,swoole是这样处理的：

请求到达 Main Reactor        |
        |Main Reactor根据Reactor的情况，将请求注册给对应的Reactor
(每个Reactor都有epoll。用来监听客户端的变化)        |
        |客户端有变化时，交给worker来处理        |
        |worker处理完毕，通过进程间通信(比如管道、共享内存、消息队列)发给对应的reactor。        |
        |reactor将响应结果发给相应的连接        |
        |
    请求处理完成

因为reactor基于epoll，所以每个reactor可以处理无数个连接请求。 如此，swoole就轻松的处理了高并发。

3、swoole如何实现异步I/O

基于上面的Swoole结构图，我们看到swoole的worker进程有2种类型：
一种是 普通的worker进程，一种是 task worker进程。

worker进程是用来处理普通的耗时不是太长的请求；task worker进程用来处理耗时较长的请求，比如数据库的I/O操作。

我们以异步Mysql举例：

耗时较长的Mysql查询进入worker            |
            |worker通过管道将这个请求交给taskworker来处理            |
            |worker再去处理其他请求            |
            |task worker处理完毕后，处理结果通过管道返回给worker            |
            |worker 将结果返回给reactor            |
            |reactor将结果返回给请求方

如此，通过worker、task worker结合的方式，我们就实现了异步I/O。

四、参考文章

Nginx 多进程模型是如何实现高并发的？
PHP并发IO编程之路
epoll 或者 kqueue 的原理是什么？
IO 多路复用是什么意思？

进程与线程的一个简单解释

leokim / / 技术, 系统

进程（process）和线程（thread）是操作系统的基本概念，但是它们比较抽象，不容易掌握。

最近，我读到一篇材料，发现有一个很好的类比，可以把它们解释地清晰易懂。

1.

计算机的核心是CPU，它承担了所有的计算任务。它就像一座工厂，时刻在运行。

2.

假定工厂的电力有限，一次只能供给一个车间使用。也就是说，一个车间开工的时候，其他车间都必须停工。背后的含义就是，单个CPU一次只能运行一个任务。

3.

进程就好比工厂的车间，它代表CPU所能处理的单个任务。任一时刻，CPU总是运行一个进程，其他进程处于非运行状态。

4.

一个车间里，可以有很多工人。他们协同完成一个任务。

5.

线程就好比车间里的工人。一个进程可以包括多个线程。

6.

车间的空间是工人们共享的，比如许多房间是每个工人都可以进出的。这象征一个进程的内存空间是共享的，每个线程都可以使用这些共享内存。

7.

可是，每间房间的大小不同，有些房间最多只能容纳一个人，比如厕所。里面有人的时候，其他人就不能进去了。这代表一个线程使用某些共享内存时，其他线程必须等它结束，才能使用这一块内存。

8.

一个防止他人进入的简单方法，就是门口加一把锁。先到的人锁上门，后到的人看到上锁，就在门口排队，等锁打开再进去。这就叫"互斥锁"（Mutual exclusion，缩写 Mutex），防止多个线程同时读写某一块内存区域。

9.

还有些房间，可以同时容纳n个人，比如厨房。也就是说，如果人数大于n，多出来的人只能在外面等着。这好比某些内存区域，只能供给固定数目的线程使用。

10.

这时的解决方法，就是在门口挂n把钥匙。进去的人就取一把钥匙，出来时再把钥匙挂回原处。后到的人发现钥匙架空了，就知道必须在门口排队等着了。这种做法叫做"信号量"（Semaphore），用来保证多个线程不会互相冲突。

不难看出，mutex是semaphore的一种特殊情况（n=1时）。也就是说，完全可以用后者替代前者。但是，因为mutex较为简单，且效率高，所以在必须保证资源独占的情况下，还是采用这种设计。

11.

操作系统的设计，因此可以归结为三点：

（1）以多进程形式，允许多个任务同时运行；

（2）以多线程形式，允许单个任务分成不同的部分运行；

（3）提供协调机制，一方面防止进程之间和线程之间产生冲突，另一方面允许进程之间和线程之间共享资源。

（完）

http://www.ruanyifeng.com/blog/2013/04/processes_and_threads.html

怎样理解阻塞非阻塞与同步异步的区别？

leokim / / 技术

老张爱喝茶，废话不说，煮开水。
出场人物：老张，水壶两把（普通水壶，简称水壶；会响的水壶，简称响水壶）。
1 老张把水壶放到火上，立等水开。（同步阻塞）
老张觉得自己有点傻
2 老张把水壶放到火上，去客厅看电视，时不时去厨房看看水开没有。（同步非阻塞）
老张还是觉得自己有点傻，于是变高端了，买了把会响笛的那种水壶。水开之后，能大声发出嘀~~~~的噪音。
3 老张把响水壶放到火上，立等水开。（异步阻塞）
老张觉得这样傻等意义不大
4 老张把响水壶放到火上，去客厅看电视，水壶响之前不再去看它了，响了再去拿壶。（异步非阻塞）
老张觉得自己聪明了。

所谓同步异步，只是对于水壶而言。
普通水壶，同步；响水壶，异步。
虽然都能干活，但响水壶可以在自己完工之后，提示老张水开了。这是普通水壶所不能及的。
同步只能让调用者去轮询自己（情况2中），造成老张效率的低下。

所谓阻塞非阻塞，仅仅对于老张而言。
立等的老张，阻塞；看电视的老张，非阻塞。
情况1和情况3中老张就是阻塞的，媳妇喊他都不知道。虽然3中响水壶是异步的，可对于立等的老张没有太大的意义。所以一般异步是配合非阻塞使用的，这样才能发挥异步的效用。

C语言宏应用——-#define STR(X) #X

leokim / / C语言, 技术

#：会把参数转换为字符串

#define STR(x)    #x#define MAX    100

STR(MAX) 会被扩展成"MAX"

这样就有一个缺陷，如果入参为宏，并不能打印出宏的值（比如上一个例子，只打印出了MAX，并没有打印出MAX的值）

可以将宏扩展下

 

#define _STR(x)    #x#define STR(x)    _STR(x)#define MAX    100

 

STR(MAX)会按照以下顺序替换

STR(100)

_STR(100)

"100"

 

 

 

最后输出100

C语言 宏

leokim / / C语言, 技术 
1. 不带参数的宏定义：

    宏定义又称为宏代换、宏替换，简称“宏”。

    格式： #define 标识符 字符串

    其中的标识符就是所谓的，也称为“宏名”。

    预处理（预编译）工作也叫做宏展开：将宏名替换为字符串。

    掌握"宏"概念的关键是“换”。一切以换为前提、做任何事情之前先要换，准确理解之前就要“换”。

    即在对相关命令或语句的含义和功能作具体分析之前就要换：

    例： 　　#define PI 3.1415926 　　把程序中出现的PI全部换成3.1415926

    说明：

    （1）宏名一般用大写

    （2）使用宏可提高程序的通用性和易读性，减少不一致性，减少输入错误和便于修改。例如：数组大小常用宏定义

    （3）预处理是在编译之前的处理，而编译工作的任务之一就是语法检查，预处理不做语法检查。

    （4）宏定义末尾不加分号；

    （5）宏定义写在函数的花括号外边，作用域为其后的程序，通常在文件的最开头。

    （6）可以用#undef命令终止宏定义的作用域

    （7）宏定义可以嵌套

    （8）字符串" "中永远不包含宏

    （9）宏定义不分配内存，变量定义分配内存。
    
2.  带参数的宏定义：
    除了一般的字符串替换，还要做参数代换

    格式： 　　#define 宏名（参数表） 字符串

    例如：#define S（a,b） a*b

    area=S（3,2）；第一步被换为area=a*b; ，第二步被换为area=3*2;

    类似于函数调用，有一个哑实结合的过程：

    （1）实参如果是表达式容易出问题

    #define S（r） r*r

    area=S（a+b）；第一步换为area=r*r;,第二步被换为area=a+b*a+b;

    正确的宏定义是#define S（r） （（r）*（r））

    （2）宏名和参数的括号间不能有空格

    （3）宏替换只作替换，不做计算，不做表达式求解

    （4）函数调用在编译后程序运行时进行，并且。宏替换在编译前进行，不分配内存

    （5）宏的哑实结合不存在类型，也没有类型转换。

    （6）函数只有一个返回值，利用宏则可以设法得到多个值

    （7）宏展开使源程序变长，函数调用不会

    （8）宏展开不占运行时间，只占编译时间，函数调用占运行时间（分配内存、保留现场、值传递、返回值）
3.  宏定义其他冷门、重点知识

    #define用法

    1、 用无参宏定义一个简单的常量

    #define LEN 12

    这个是最常见的用法，但也会出错。

    比如下面几个知识点你会吗？可以看下：

    （1） #define NAME "zhangyuncong"

    程序中有"NAME"则，它会不会被替换呢？

    （2） #define 0x abcd

    可以吗？也就是说，可不可以用把标识符的字母替换成别的东西？

    （3） #define NAME "zhang

    这个可以吗？

    （4） #define NAME "zhangyuncong"

    程序中有上面的宏定义，并且，程序里有句：

    NAMELIST这样，会不会被替换成"zhangyuncong"LIST

    四个题答案都是否定的。

    第一个，""内的东西不会被宏替换。这一点应该大都知道。

    第二个，宏定义前面的那个必须是合法的

    第三个，宏定义也不是说后面东西随便写，不能把字符串的两个""拆开。

    第四个：只替换标识符，不替换别的东西。NAMELIST整体是个标识符，而没有NAME标识符，所以不替换。

    也就是说，这种情况下记住：#define 第一位置第二位置

    （1） 不替换程序中字符串里的东西。

    （2） 第一位置只能是合法的标识符（可以是关键字）

    （3） 第二位置如果有字符串，必须把""配对。

    （4） 只替换与第一位置完全相同的标识符

    还有就是老生常谈的话：记住这是简单的替换而已，不要在中间计算结果，一定要替换出表达式之后再算。

    2、 带参宏一般用法

    比如#define MAX（a,b） （（a）>（b）？（a）：（b））

    则遇到MAX（1+2,value）则会把它替换成：

    （（1+2）>（value）？（1+2）：（value））

    注意事项和无参宏差不多。

    但还是应注意

    #define FUN（a） "a"

    则，输入FUN（345）会被替换成什么？

    其实，如果这么写，无论宏的实参是什么，都不会影响其被替换成"a"的命运。

    也就是说，""内的字符不被当成形参，即使它和一模一样。

    那么，你会问了，我要是想让这里输入FUN（345）它就替换成"345"该怎么实现呢？

    请看下面关于#的用法

    3、 有参宏定义中#的用法

    #define STR（str） #str

    #用于把宏定义中的参数两端加上字符串的""

    比如，这里STR（my#name）会被替换成"my#name"

    一般由任意字符都可以做形参，但以下情况会出错：

    STR（））这样，编译器不会把“）”当成STR（）的参数。

    STR（，）同上，编译器不会把“，”当成STR的参数。

    STR（A,B）如果实参过多，则编译器会把多余的参数舍去。（VC++2008为例）

    STR（（A,B））会被解读为实参为：（A,B），而不是被解读为两个实参，第一个是（A第二个是B）。 　　    4、 有参宏定义中##的用法

    #define WIDE（str） L##str

    则会将形参str的前面加上L

    比如：WIDE（"abc"）就会被替换成L"abc"

    如果有#define FUN（a,b） vo##a##b（）

    那么FUN（id ma,in）会被替换成void main（）

    5、 多行宏定义：

    #define doit（m,n） for（int i=0;i<（n）；++i）\

    {\

    m+=i;\

    }

python爬虫练手

leokim / / Python

51无聊谢了个爬虫玩

python写这类小东西真的很方便

__author__='LeoKim'
from bs4 import BeautifulSoup
 
import re
import urllib.request, urllib.parse, http.cookiejar
import json
import time
import pymysql

conn=pymysql.connect(host='localhost',user='root',passwd='superhero',db='python_test',port=3306,charset='utf8')
cur=conn.cursor()#获取一个游标

#通过链接获取每页的小区名
def getVillage(url):
	cj = http.cookiejar.CookieJar()
	opener = urllib.request.build_opener(urllib.request.HTTPCookieProcessor(cj))
	opener.addheaders = [('User-Agent','Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36'),
	('Cookie', 'select_city=320100; lianjia_uuid=c73af582-9ed7-42ed-9738-bbd4688c67e0; UM_distinctid=15bb9f33ca387c-0ac15874ad5d0d-6a11157a-1fa400-15bb9f33ca4a02; _jzqckmp=1; all-lj=c28812af28ef34a41ba2474a2b5c52c2; _jzqx=1.1493473537.1493544561.2.jzqsr=nj%2Elianjia%2Ecom|jzqct=/ershoufang/gulou/.jzqsr=nj%2Elianjia%2Ecom|jzqct=/xiaoqu/pg1/; _gat=1; _gat_past=1; _gat_global=1; _gat_new_global=1; _gat_dianpu_agent=1; _smt_uid=59049861.8870a59; CNZZDATA1253492138=835595246-1493470448-null%7C1493541950; CNZZDATA1254525948=1922726511-1493470772-null%7C1493540995; CNZZDATA1255633284=630946367-1493469955-null%7C1493543402; CNZZDATA1255604082=270979082-1493468920-null%7C1493544528; _qzja=1.1520598967.1493473405458.1493480837509.1493544561423.1493544849473.1493544851953.0.0.0.29.3; _qzjb=1.1493544561423.10.0.0.0; _qzjc=1; _qzjto=10.1.0; _jzqa=1.2414222906473966000.1493473537.1493480838.1493544561.3; _jzqc=1; _jzqb=1.10.10.1493544561.1; _ga=GA1.2.1108117219.1493473408; _gid=GA1.2.2091828031.1493544853; lianjia_ssid=5c8ebd96-81f4-4430-bfda-6d941fcb8663')]

	urllib.request.install_opener(opener)

	html_bytes = urllib.request.urlopen(url).read()
	html_string = html_bytes.decode('utf-8')
	return html_string



def start(start_url):
	html_doc = getVillage(start_url)
	soup = BeautifulSoup(html_doc, 'html.parser')

	#获取所有页数和现在页数
	totalPageNoDiv=soup.find("div","house-lst-page-box")
	Page = eval(totalPageNoDiv.attrs['page-data'])

	totalPageNo = Page['totalPage']
	curPage = Page['curPage']

	print('当前正在抓取第'+str(curPage)+'页，共'+str(totalPageNo)+'页.')


	#获取小区内容
	divs = soup.find_all("div","title")
	for div in divs:
		a_tag = div.find("a",target="_blank")
		if(a_tag):
			#插入数据库
			sql = "INSERT INTO `village` (`name`) VALUES (%s)"
			cur.execute(sql, (a_tag.string))

	curPage = curPage + 1;
	if(totalPageNo == curPage-1):
		print('执行完毕.')
	else:
		time.sleep(10)
		start_url = "http://nj.lianjia.com/xiaoqu/pg"+str(curPage)
		start(start_url)


totalPageNo=1
curPage=1

start_url = "http://nj.lianjia.com/xiaoqu/pg"+str(curPage)
start(start_url)


cur.close()#关闭游标
conn.close()#释放数据库资源
__author__='LeoKim'
from bs4 import BeautifulSoup
import pymysql
import urllib.request, urllib.parse, http.cookiejar
from urllib import parse
import pymysql

conn=pymysql.connect(host='localhost',user='root',passwd='superhero',db='python_test',port=3306,charset='utf8')
cur=conn.cursor()#获取一个游标

def getgeohash(keyword):
	key={
		'keyword':keyword
	}


	url='https://mainsite-restapi.ele.me/v2/pois?extras%5B%5D=count&geohash=wtsm0ss7yfj8&limit=20&type=nearby&'+parse.urlencode(key)

	cj = http.cookiejar.CookieJar()
	opener = urllib.request.build_opener(urllib.request.HTTPCookieProcessor(cj))
	opener.addheaders = [('User-Agent','Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36'),
	('Cookie', 'ubt_ssid=but8xnmtkpfrbvypd9z3hxaa5i8ugmj0_2017-04-29; _utrace=edd9bb6de13caed667d2cf273d73fc0a_2017-04-29')]

	urllib.request.install_opener(opener)

	html_bytes = urllib.request.urlopen(url).read()
	html_string = html_bytes.decode('utf-8')
	soup = BeautifulSoup(html_string, 'html.parser')

	try:
		info = eval(soup.prettify())
		if len(info) and info is not None:
			return info[0]
		else:
			return 'error'	
	except:
		return 'error'
	

sql = "SELECT id,name FROM `village` where geohash is null"
cur.execute(sql)
data = cur.fetchall()

for d in data:
	print(d[0])

	geohash=''
	latitude=''
	longitude=''

	gh=getgeohash(d[1])

	if gh=='error':
		geohash='error'
		latitude=''
		longitude=''
	else:
		geohash = gh['geohash']
		latitude = gh['latitude']
		longitude = gh['longitude']

	print(geohash,latitude,longitude)

# gh['geohash'] is None

	sql = "UPDATE `village` SET geohash=%s,latitude=%s,longitude=%s where id=%s"
	cur.execute(sql, (geohash,latitude,longitude,d[0]))
	
cur.close()#关闭游标
conn.close()#释放数据库资源
__author__='LeoKim'
from bs4 import BeautifulSoup
import pymysql
import urllib.request, urllib.parse, http.cookiejar
from urllib import parse
import pymysql
import json
import re

conn=pymysql.connect(host='localhost',user='root',passwd='superhero',db='python_test',port=3306,charset='utf8')
cur=conn.cursor()#获取一个游标

def getstore(village_id,geohash,latitude,longitude,limit):
	key={
		'geohash':geohash,
		'latitude':latitude,
		'longitude':longitude,
		'limit':limit
	}


	url='https://mainsite-restapi.ele.me/shopping/restaurants?extras%5B%5D=activities&offset=0&terminal=web'+parse.urlencode(key)

	cj = http.cookiejar.CookieJar()
	opener = urllib.request.build_opener(urllib.request.HTTPCookieProcessor(cj))
	opener.addheaders = [('User-Agent','Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36'),
	('Cookie', 'ubt_ssid=but8xnmtkpfrbvypd9z3hxaa5i8ugmj0_2017-04-29; _utrace=edd9bb6de13caed667d2cf273d73fc0a_2017-04-29')]

	urllib.request.install_opener(opener)

	html_bytes = urllib.request.urlopen(url).read()
	html_string = html_bytes.decode('utf-8')
	soup = BeautifulSoup(html_string, 'html.parser')

	info = soup.prettify()
	jsonData = json.loads(info)
	

	for data in jsonData:

		print(data['id'])
		print(village_id)
		print(data['name'])
		print(data['recent_order_num'])
		print(data['address'])
		print(data['order_lead_time'])
		print(data['float_delivery_fee'])

		average_cost=0
		if 'average_cost' in data:
			cost = re.findall(r'\d+', data['average_cost'])
			average_cost=cost[0]
			print(average_cost)

		print(data['rating'])
		print('---------------------------------------------')

		shop_id = data['id']
		name = data['name']
		address = data['address']
		recent_order_num = data['recent_order_num']
		order_lead_time = data['order_lead_time']
		float_delivery_fee = data['float_delivery_fee']
		rating = data['rating']

		sql = "INSERT INTO `store` (`shop_id`,`village_id`,`name`,`address`,`recent_order_num`,`order_lead_time`,`float_delivery_fee`, `average_cost`, `rating`) VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s)"
		cur.execute(sql, (shop_id,village_id,name, address, recent_order_num, order_lead_time, float_delivery_fee, average_cost, rating))


# getstore('wtst84g4g0u','31.91988','118.83238',30)

sql = "SELECT id,name,geohash,latitude,longitude FROM `village` where id >482 and geohash is not null"
cur.execute(sql)
data = cur.fetchall()

for d in data:
	village_id=d[0]
	geohash = d[2]
	latitude = d[3]
	longitude = d[4]

	getstore(village_id,geohash,latitude,longitude,30)


cur.close()#关闭游标
conn.close()#释放数据库资源