[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_11":-5},"routes/user.$name.collections",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20},"topics",[36,37],"user",{"_21":22,"_13":14,"_23":24,"_25":14,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35},"loginname","warjiang","page",1,"limit",20,"total",2,"id","15354","avatar_url","https://avatars2.githubusercontent.com/u/6478745?v=4","githubUsername","create_at","2014-12-25 08:45:16.894","score",55,"topic_count",0,"reply_count",11,"is_star",false,{"_21":59,"_39":60,"_41":61,"_42":62,"_44":63,"_46":64,"_48":49,"_50":35,"_32":65,"_52":66,"_26":67,"_55":68},{"_21":38,"_39":40,"_41":-5,"_42":43,"_44":45,"_46":47,"_48":49,"_50":35,"_32":51,"_52":53,"_26":54,"_55":56},"1941","author_id","5432","tab","content","我自己在用socket.io开发，对官方网站上的文档，进行简单的整理，然后自己写了一个简单的聊天程序。\r\n最最开始\r\n\r\n先安装socket.io:\r\n\r\n 1 npm install socket.io\r\n\r\n利用Node的搭建Http服务\r\n\r\n分为两个文件，服务端文件app.js和客户端index.html\r\n\r\n app.js\r\n 01 var app = require('http').createServer(handler)\r\n 02 , io = require('socket.io').listen(app)\r\n 03 , fs = require('fs')\r\n 04 \r\n 05 app.listen(80);\r\n 06 \r\n 07 function handler (req, res) {\r\n 08 fs.readFile(__dirname + '/index.html',\r\n 09 function (err, data) {\r\n 10 if (err) {\r\n 11 res.writeHead(500);\r\n 12 return res.end('Error loading index.html');\r\n 13 }\r\n 14 \r\n 15 res.writeHead(200);\r\n 16 res.end(data);\r\n 17 });\r\n 18 }\r\n 19 \r\n 20 io.sockets.on('connection', function (socket) {\r\n 21 socket.emit('news', { hello: 'world' });\r\n 22 socket.on('my other event', function (data) {\r\n 23 console.log(data);\r\n 24 });\r\n 25 });\r\n\r\n这里需要注意的是：\r\nrequire('socket.io').listen(app) 实际上这句就是讲socket的监听加入的app设置的http模块了\r\nio.sockets.on('connection',function()....)这里设置了在连接后进行的处理，代码示例中，主要包含两件事，一个是向前段发送news的事件，一个是监听my other event事件。\r\n\r\n index.html\r\n 1 \r\n 2 \r\n\r\n客户端一个引用了socket.io.js的javscript库\r\n还有就是连接服务器(通过io.connect('http://localhost'))\r\n之后在监听收到news的事件后，发送my other event事件\r\n\r\n\r\n利用Express3框架\r\n上面的例子只是使用nodejs建立了一个交互，也可以使用express2的web框架，具体app.js代码如下：\r\n\r\nv\r\n\r\n ar app = require('express')()\r\n , server = require('http').createServer(app)\r\n , io = require('socket.io').listen(server);\r\n \r\n server.listen(80);\r\n \r\n app.get('/', function (req, res) {\r\n res.sendfile(__dirname + '/index.html');\r\n });\r\n \r\n io.sockets.on('connection', function (socket) {\r\n socket.emit('news', { hello: 'world' });\r\n socket.on('my other event', function (data) {\r\n console.log(data);\r\n });\r\n });\r\n\r\n接收发送事件\r\nsocket.io允许用户自定义发送接收的事件。除了connect，message，disconnect三个事件外，用户可以自定义自己的事件\r\n\r\n // note, io.listen() will create a http server for you\r\n var io = require('socket.io').listen(80);\r\n \r\n io.sockets.on('connection', function (socket) {\r\n io.sockets.emit('this', { will: 'be received by everyone'});\r\n \r\n socket.on('private message', function (from, msg) {\r\n console.log('I received a private message by ', from, ' saying ', msg);\r\n });\r\n \r\n socket.on('disconnect', function () {\r\n io.sockets.emit('user disconnected');\r\n });\r\n });\r\n\r\n存储数据\r\n有的时候需要存储一些和客户端关联的数据在会话里，socket.io也是支持的，代码如下：\r\n\r\n var io = require('socket.io').listen(80);\r\n \r\n io.sockets.on('connection', function (socket) {\r\n socket.on('set nickname', function (name) {\r\n socket.set('nickname', name, function () {\r\n socket.emit('ready');\r\n });\r\n });\r\n \r\n socket.on('msg', function () {\r\n socket.get('nickname', function (err, name) {\r\n console.log('Chat message by ', name);\r\n });\r\n });\r\n });\r\n\r\nsocket.set和socket.get方法分为用于设置和获取变量。\r\n\r\n\r\n设置命名空间\r\n有的时候要一个程序支持多个应用，如果使用默认的 \"/\" 命名空间可能会比较混乱。如果想让一个连接可以支持多个连接，可以使用如下的命名空间的方法：\r\n\r\n app.js\r\n var io = require('socket.io').listen(80);\r\n \r\n var chat = io\r\n .of('/chat')\r\n .on('connection', function (socket) {\r\n socket.emit('a message', {\r\n that: 'only'\r\n , '/chat': 'will get'\r\n });\r\n chat.emit('a message', {\r\n everyone: 'in'\r\n , '/chat': 'will get'\r\n });\r\n });\r\n\r\nvar news = io\r\n .of('/news')\r\n .on('connection', function (socket) {\r\n socket.emit('item', { news: 'item' });\r\n });\r\n\r\n\r\n client.js\r\n \r\n\r\n发送获取数据\r\n有的时候，你需要在发送数据后，等待服务器的消息确认。当然简单的发，可以通过两次消息发送，来完成。这里介绍一种使用回调函数的方法：\r\n\r\n app.js\r\n var io = require('socket.io').listen(80);\r\n \r\n io.sockets.on('connection', function (socket) {\r\n socket.on('ferret', function (name, fn) {\r\n fn('woot');\r\n });\r\n });\r\n client.html\r\n \r\n\r\n广播\r\n向所有的连接触发事件，这里注意：不包括本身连接的事件。\r\n\r\n var io = require('socket.io').listen(80);\r\n \r\n io.sockets.on('connection', function (socket) {\r\n socket.broadcast.emit('user connected');\r\n });\r\n\r\n我写的聊天程序：\r\n\r\nindex.html\r\n\r\n \r\n \r\n \r\n
\r\n Message:\r\n \r\n \r\n NickName:\r\n \r\n \r\n\r\n\r\napp.js\r\n\r\n var app = require('http').createServer(handler)\r\n , io = require('socket.io').listen(app)\r\n , fs = require('fs');\r\n \r\n \r\n app.listen(80);\r\n \r\n function handler (req, res) {\r\n fs.readFile(__dirname + '/index.html',\r\n function (err, data) {\r\n if (err) {\r\n res.writeHead(500);\r\n return res.end('Error loading index.html');\r\n }\r\n \r\n res.writeHead(200);\r\n res.end(data);\r\n });\r\n }\r\n \r\n io.sockets.on('connection', function (socket) {\r\n // socket.emit('news', { hello: 'world' });\r\n // socket.on('my other event', function (data) {\r\n // console.log(data);\r\n // });\r\n \r\n socket.set('nickname', 'nickname', function(){\r\n });\r\n \r\n socket.on('set nickname', function(name){\r\n socket.set('nickname', name, function(){\r\n console.log(\"change nickname=>\" + name);\r\n socket.emit('nickname ready');\r\n });\r\n });\r\n \r\n socket.on('chat', function(data){\r\n socket.get('nickname', function(err, name){\r\n \r\n socket.emit(\"notice\", {message: name + \":\" + data.message});\r\n socket.broadcast.emit(\"notice\", {message: name + \":\" + data.message});\r\n console.log(\"chat: \" + data.message);\r\n });\r\n });\r\n });\r\n\r\n","title","socket.io入门整理","last_reply_at","2015-12-11 09:30:25.987","good",true,"top",23,"visit_count",161235,"2012-11-13 07:54:47.044","author",{"_13":57,"_23":58},"dtrex","http://www.gravatar.com/avatar/6540a9b314d54e11e61f3d1e0a503338?size=48","42451","38335","share","## 介绍\r\n\r\n[Babel](https://github.com/babel/babel) 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手，介绍 Babel 在解决这类问题时是如何划分模块。\r\n\r\n## Babel 的模块划分\r\n\r\n![Babel 的模块划分](https://qiniu.mdnice.com/2d77590394a73200940d90c582f5aeb1.svg+xml)\r\n\r\n其中 babel-loader 隶属于 webpack，不在 Babel 主仓库。\r\n\r\n## 框架层\r\n\r\n### 常见的编译器\r\n\r\n常见的解析器有 acorn、@babel/parser (babylon)、flow、traceur、typescript、uglify-js 等，各自的 AST 语法树大致相同。\r\n\r\n### @babel/parser 的实现\r\n\r\n#### 关键词说明\r\n\r\n- Literal：字面量。包括：Boolean、Number、String。\r\n- Identifier：识别量。包括变量名、undefined、null 等。\r\n- Val：值。常分为左值和右值。左值表示一个可以被赋值的节点，如：[a] 等，左值往往是 Pattern、Identifier 等类型。右值表示一个代表具体值的节点，如：b.c 等，右值往往是 Expression、Identifier、Literal 等类型。左值与右值之间通过等号联结，代表赋值表达式，如：[a] = b.c。\r\n- Declaration：赋值。\r\n- Expression：表达式。常用来表示右值。常见的 Expression 有：MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression 等。\r\n- Statement：语句。往往由 Expression 组合而成。常见的 Statement 有：ExpressionStatement。\r\n- Program：程序。所有代码在一个 Program 下，一个 Program 包含多个并列的 Statement。\r\n\r\n```js\r\nlet c = 0;\r\nwhile (a < 10) {\r\n const b = a % 2;\r\n if (b == 0) {\r\n c++;\r\n }\r\n}\r\nconsole.log(c);\r\n```\r\n\r\n上面的这段代码通过 @babel/parser 解析后得到的 AST 语法树如下：\r\n\r\n![示例 AST 语法树](https://qiniu.mdnice.com/2f50bc83533a5946b2d06c66705bed68.svg+xml)\r\n\r\n#### @babel/parser 的 9 层继承\r\n\r\n![@babel/parser 的 9 层继承](https://qiniu.mdnice.com/2316bd41cf30f1731b015f988b3d3746.svg+xml)\r\n\r\n- Parser：初始化\r\n- StatementParser：解析语句，拼装成 program，代码大约有 2100+ 行\r\n- ExpressionParser：解析表达式，代码大约有 2400+ 行\r\n- LValParser：左值处理，将节点变为可以被赋值的节点。如：ArrayExpression 转为 ArrayPattern\r\n- NodeUtils：AST 节点操作，如复制等\r\n- UtilParser：工具函数，如判断行末等\r\n- Tokenizer：词法分析，大约有 1400+ 行\r\n- LocationParser：文件位置信息\r\n- CommentsParser：解析注释\r\n- BaseParser：插件能力\r\n\r\n大部分模块代码量在百行左右，其中 StatementParser、ExpressionParser 和 Tokenizer 有较多复杂逻辑。\r\n\r\n### @babel/traverse\r\n\r\n提供遍历 AST 语法树的能力，如：\r\n\r\n```js\r\ntraverse(ast, {\r\n FunctionDeclaration: function(path) {\r\n path.node.id.name = \"x\";\r\n }\r\n});\r\n\r\ntraverse(ast, {\r\n enter(path) {\r\n if (path.isIdentifier({ name: \"n\" })) {\r\n path.node.name = \"x\";\r\n }\r\n }\r\n});\r\n```\r\n\r\n`path` 对象上有下面的属性和方法：\r\n\r\n- 属性\r\n - node：节点\r\n - parent：父节点\r\n - parentPath：父节点的 path\r\n - scope：作用域\r\n- 方法\r\n - get：获取子节点属性\r\n - findParent：向父节点搜寻节点\r\n - getSibling：获取兄弟路径\r\n - getFunctionParent：获取包含该节点最近的父路径，并且是 function\r\n - getStatementParent：获取最近的 Statement 类型的父节点\r\n - replaceWith：用 AST 节点替换该节点\r\n - replaceWithMultiple：用多个 AST 节点替换该节点\r\n - replaceWithSourceString：用源码解析后的 AST 节点替换该节点\r\n - insertBefore：在该节点前插入兄弟节点\r\n - insertAfter：在该节点后插入兄弟节点\r\n - remove：删除节点\r\n - pushContainer：将 AST 节点 push 到节点的属性里面，类似数组操作\r\n\r\n### @babel/generator\r\n\r\n将 AST 转为代码文本。示例用法：\r\n\r\n```js\r\nimport { parse } from '@babel/parser';\r\nimport generate from '@babel/generator';\r\n\r\nconst ast = parse('class Example {}');\r\ngenerate(ast); // => { code: 'class Example {}' }\r\n```\r\n\r\n可以生成 source map。\r\n\r\n```js\r\nimport { parse } from '@babel/parser';\r\nimport generate from '@babel/generator';\r\n\r\nconst code = 'class Example {}';\r\nconst ast = parse(code);\r\n\r\nconst output = generate(ast, { sourceMaps: true, sourceFileName: code }); // => { code: 'class Example {}', rawMappings: ... }\r\n// or\r\nconst output = generate(ast, { sourceMaps: true, sourceFileName: 'source.js' }, code); // => { code: 'class Example {}', rawMappings: ... }\r\n```\r\n\r\n还可以合并多个文件，同时生成 source map。\r\n\r\n```js\r\nimport { parse } from '@babel/parser';\r\nimport generate from '@babel/generator';\r\n\r\nconst a = 'var a = 1;';\r\nconst b = 'var b = 2;';\r\nconst astA = parse(a, { sourceFilename: 'a.js' });\r\nconst astB = parse(b, { sourceFilename: 'b.js' });\r\nconst ast = {\r\n type: 'Program',\r\n body: [...astA.program.body, ...astB.program.body]\r\n};\r\n\r\nconst { code, map } = generate(ast, { sourceMaps: true }, {\r\n 'a.js': a,\r\n 'b.js': b\r\n});\r\n```\r\n\r\n### @babel/core\r\n\r\n主要提供 transform 和 parse 相关的 API。\r\n\r\ntransform 的流程主要是 parse -> traverse -> generate。\r\n\r\nparse 主要提供对 @babel/parser 的封装。\r\n\r\n## 实现层\r\n\r\n### @babel/plugin\r\n\r\n#### @babel/plugin-syntax-x\r\n\r\n通过插件开关打卡语法解析能力。@babel/parser 中判断了 plugin 开关，实现了这些语法解析能力。如 @babel/plugin-syntax-jsx：\r\n\r\n```js\r\nparserOpts.plugins.push(\"jsx\");\r\n```\r\n\r\n#### @babel/plugin-transform-x\r\n\r\n实现语法的转换。如 @babel/plugin-transform-exponentiation-operator：\r\n\r\n```js\r\nexport default {\r\n name: \"transform-exponentiation-operator\",\r\n visitor: build({\r\n operator: \"**\",\r\n build(left, right) {\r\n return t.callExpression(\r\n t.memberExpression(t.identifier(\"Math\"), t.identifier(\"pow\")),\r\n [left, right],\r\n );\r\n },\r\n }),\r\n}\r\n```\r\n\r\n#### @babel/plugin-proposal-x\r\n\r\n支持草案级别的语法转换。如 @babel/plugin-proposal-numeric-separator：\r\n\r\n```js\r\nexport default {\r\n name: \"proposal-numeric-separator\",\r\n inherits: syntaxNumericSeparator,\r\n\r\n visitor: {\r\n CallExpression: replaceNumberArg,\r\n NewExpression: replaceNumberArg,\r\n NumericLiteral({ node }) {\r\n const { extra } = node;\r\n if (extra && /_/.test(extra.raw)) {\r\n extra.raw = extra.raw.replace(/_/g, \"\");\r\n }\r\n },\r\n },\r\n}\r\n```\r\n\r\n### @babel/preset-x\r\n\r\n提供各类组合好的 plugins、syntax 和 helpers。\r\n\r\n常用的是 @babel/preset-env，结合 browserslist 设置代码的兼容性。\r\n\r\n### @babel/polyfill\r\n\r\n从 Babel 7.4.0 起废弃，推荐使用 core-js 和 regenerator-runtime。其中 core-js 提供了 ECMAScript 的所有兼容代码，regenerator-runtime 提供了 async、generator 等函数的执行环境。\r\n\r\n### @babel/helpers\r\n\r\n定义了 Babel 运行环境的辅助函数。如在 class 模块前插入 classCallCheck 的 helper。\r\n\r\nplugin 内的函数调用方式：\r\n\r\n```js\r\nexport default {\r\n visitor: {\r\n ClassExpression(path) {\r\n\t this.addHelper(\"classCallCheck\");\r\n // ...\r\n }\r\n};\r\n```\r\n\r\n生成的代码中将包含 classCallCheck：\r\n\r\n```js\r\nfunction _classCallCheck(instance, Constructor) {\r\n if (!(instance instanceof Constructor)) {\r\n throw new TypeError(\"Cannot call a class as a function\");\r\n }\r\n}\r\n\r\nvar Circle = function Circle() {\r\n _classCallCheck(this, Circle);\r\n};\r\n```\r\n\r\n### @babel/runtime\r\n\r\n提供 Babel 的运行环境，包括 regenerator-runtime。运行环境会提供一些辅助代码，如：\r\n\r\n使用 @babel/helpers 的情况：\r\n\r\n```js\r\nfunction _classCallCheck(instance, Constructor) {\r\n if (!(instance instanceof Constructor)) {\r\n throw new TypeError(\"Cannot call a class as a function\");\r\n }\r\n}\r\n\r\nvar Circle = function Circle() {\r\n _classCallCheck(this, Circle);\r\n};\r\n```\r\n\r\n使用 @babel/plugin-transform-runtime 可以把这些代码复用起来：\r\n\r\n```js\r\nvar _classCallCheck = require(\"@babel/runtime/helpers/classCallCheck\");\r\n\r\nvar Circle = function Circle() {\r\n _classCallCheck(this, Circle);\r\n};\r\n```\r\n\r\n@babel/runtime 源码中没有内容，依赖构建脚本将 @babel/helpers 中的代码复制过去。\r\n\r\n除了这个运行环境之外，Babel 还提供了 @babel/runtime-corejs2 和 @babel/runtime-corejs3，分别是基于 core-js v2 和 v3 提供的运行环境。可以在 @babel/plugin-transform-runtime 的 corejs 参数中设置使用的运行环境。\r\n\r\n## 辅助层\r\n\r\n### @babel/types\r\n\r\n提供基础的类型值，创建类型的函数，便于 @babel/plugin、@babel/parser 等使用。\r\n\r\n```js\r\nconst binaryExpression = t.binaryExpression('+', t.numericLiteral(1), t.numericLiteral(2))\r\n```\r\n\r\n### @babel/code-frame\r\n\r\n打印出错位置。示例代码：\r\n\r\n```js\r\nimport { codeFrameColumns } from '@babel/code-frame';\r\n\r\nconst rawLines = `class Foo {\r\n constructor()\r\n}`;\r\nconst location = { start: { line: 2, column: 16 } };\r\ncodeFrameColumns(rawLines, location);\r\n```\r\n\r\n输出的结果是：\r\n\r\n```\r\n 1 | class Foo {\r\n> 2 | constructor()\r\n | ^\r\n 3 | }\r\n```\r\n\r\n### @babel/highlight\r\n\r\n面向控制台输出有颜色的代码片段。\r\n\r\n```js\r\nimport highlight from \"@babel/highlight\";\r\n\r\nconst code = `class Foo {\r\n constructor()\r\n}`;\r\nhighlight(code);\t\t\t\t\t\t\t\t\t\t\t\t// => \"\\u001b[36mclass\\u001b[39m \\u001b[33mFoo\\u001b[39m {\\n constructor()\\n}\"\r\n```\r\n\r\n展示在控制台上：\r\n\r\n![@babel/highlight](https://qiniu.mdnice.com/b0d1af6522873c1ea4d8c240847fc846.png)\r\n\r\n### @babel/template\r\n\r\n模板引擎。\r\n\r\n```js\r\nimport template from \"@babel/template\";\r\nimport generate from \"@babel/generator\";\r\nimport * as t from \"@babel/types\";\r\n\r\nconst buildRequire = template(`\r\n var %%importName%% = require(%%source%%);\r\n`);\r\n\r\nconst ast = buildRequire({\r\n importName: t.identifier(\"myModule\"),\r\n source: t.stringLiteral(\"my-module\"),\r\n});\r\n\r\ngenerate(ast).code\t\t\t\t\t\t\t\t\t\t\t// => var myModule = require('my-module');\r\n```\r\n\r\n### @babel/helper-x\r\n\r\nBabel 的辅助函数，包含常用操作、测试函数等，内容比较庞杂。\r\n\r\n## 应用层\r\n\r\n### @babel/cli\r\n\r\n在命令行编译。\r\n\r\n```sh\r\nbabel script.js # 输出编译的结果\r\n```\r\n\r\n### @babel/standalone\r\n\r\n在浏览器编译。如：Babel 官网等会用到。\r\n\r\n```html\r\n

\r\n

\r\n\r\n\r\n\r\n\r\n```\r\n\r\n@babel/standalone 也会自动编译和执行 `` 和 `` 中的代码。\r\n\r\n```html\r\n

\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### @babel/node\r\n\r\n提供在命令行执行高级语法的环境。@babel/cli 只转换，不执行，@babel/node 会执行。不适合生产环境使用。\r\n\r\n```sh\r\nbabel-node -e script.js # script.js 里面可以使用高级语法\r\n```\r\n\r\n### @babel/register\r\n\r\n提供在 Node.js 运行环境内编译和执行高级语法。不适合生产环境使用。\r\n\r\n```js\r\nrequire(\"@babel/register\")();\r\nrequire(\"./script.js\"); \t\t\t\t\t// script.js 里面可以使用高级语法\r\n```\r\n\r\n## 常见的语法转换结果\r\n\r\n### `Array.from`\r\n\r\n```js\r\n// input\r\nArray.from([1, 2, 3])\r\n\r\n// output\r\nvar _array_from_ = require('@babel/runtime-corejs3/core-js-stable/array/from');\r\n_array_from_([1, 2, 3]);\r\n```\r\n\r\n### JSX\r\n\r\n```js\r\n// input\r\n

{content}

\r\n\r\n// output\r\nReact.createElement('div', { className: 'text' }, content);\r\n```\r\n\r\n### `class`\r\n\r\n```js\r\n// input\r\nclass Example extends Component { constructor(props) { super(props) } }\r\n\r\n// output\r\nvar _inherits_ = require('@babel/runtime-corejs3/helpers/interits');\r\nvar _class_call_check_ = require('@babel/runtime-corejs3/helpers/classCallCheck');\r\nvar _possible_constructor_return_ = require('@babel/runtime-corejs3/helpers/possibleConstructorReturn');\r\nvar _get_prototype_of_ = require('@babel/runtime-corejs3/helpers/getPrototypeOf');\r\nvar _create_class_ = require('@babel/runtime-corejs3/helpers/createClass');\r\n\r\nvar Example = function (_Component) {\r\n _inherits_(Example, _Component);\r\n\r\n function Example(props) {\r\n _class_call_check_(this, Example);\r\n\r\n return _possible_constructor_return_(this, _get_prototype_of_(Example).call(this, props));\r\n }\r\n\r\n _create_class_(Example, []);\r\n\r\n return Example;\r\n}(Component);\r\n```\r\n\r\n## 参考资料\r\n\r\n- [剖析 Babel——Babel 总览](http://www.alloyteam.com/2017/04/analysis-of-babel-babel-overview/)\r\n- [从AST编译解析谈到写babel插件](https://juejin.im/post/5b56e5636fb9a04fd26098bd)\r\n- [Babel是如何读懂JS代码的](https://zhuanlan.zhihu.com/p/27289600)","Babel 的工程化实现","2020-01-11 03:44:44.611",9,10094,"2020-01-05 13:52:06.869",{"_13":69,"_23":70},"vivaxy","https://avatars0.githubusercontent.com/u/4216856?v=4"]