浏览器渲染原理
一:
计算机的核心 - CPU和GPU
绿色的是计算单元,橙红色的是存储单元,橙黄色的是控制单元。
CPU是通用计算,而GPU是专用计算
显卡
由GPU、显存、电路板,还有BIOS固件组成1: 独立显卡主要由GPU、显存和接口电路构成2: 集成显卡没有独立显存而是使用主板上的内存
DRAM 存储器(cpu/gpu 与存储器是两个不同的芯片)1:主存储器————内存2:辅助存储器
速度来讲,就是:Register > Cache > 内存 > 硬盘。越上层,速度就越快、价格越高、容量越低。
CPU
中央处理器(Central Processing Unit)是一块超大规模的集成电路,是一台计算机的运算核心和控制核心。它的功能主要是解释计算机指令以及处理计算机软件中的数据
串行地一件接着一件处理交给它的任务在CPU上快速在多个任务间切换,对于使用者来说,就像并发(Concurrent)地执行了多个任务一样
GPUNVIDIA公司在1999年发布 Geforce256图形处理芯片时首先提出GPU的概念。从此 NVIDIA显卡的芯就用GPU来称呼。 ...
WebRender如何摆脱jank
丢弃的帧是指系统没有在帧预算内完成其工作。在浏览器完成填充之前,显示器会尝试从帧缓冲区中获取新帧。在这种情况下,显示屏将再次显示旧版本的帧。
一个掉下来的相框就像你从翻页书上撕下一页。这会使动画看起来结巴或跳跃,因为你错过了上一页和下一页之间的过渡。
因此,我们要确保在显示器再次检查之前,将所有这些像素放入帧缓冲区。让我们看看浏览器历史上是如何做到这一点的,以及这一点是如何随着时间的推移而改变的。然后我们就可以看看怎样才能更快。
GPU硬件加速
GPU Accelerated Compositing in Chrome
注: 某些类名可能已更改(例如,RenderObject到LayoutObject,RenderLayer到PaintLayer)。
摘要本文提供了在Chrome中实现硬件加速合成的背景和细节。
简介:为什么要进行硬件合成?
传统上,web浏览器完全依赖CPU来呈现网页内容。现在,即使是最小的设备,也有能力的gpu成为不可或缺的一部分,人们的注意力已经转向寻找更有效地使用这种底层硬件的方法,以实现更好的性能和节能。使用GPU合成网页的内容可以大大提高速度。
硬件合成的好处有三种:
在涉及大量像素的绘图和合成操作中,在GPU上合成页面层可以获得比CPU更好的效率(无论是在速度还是功耗方面)。硬件是专门为这些类型的工作负载设计的。
GPU上已有的内容(如加速视频、Canvas2D或WebGL)不需要昂贵的回读。
CPU与GPU之间的并行性,可以同时运行,创建高效的图形流水线。
最后,在我们开始之前,有一个很大的免责声明:Chrome图形堆栈在过去几年中已经有了实质性的发展。本文档将重 ...
浏览器周期
背景应用程序生命周期是现代操作系统管理资源的关键方式。在Android、iOS和最新的Windows版本上,操作系统可以随时启动和停止应用程序。这使得这些平台能够将资源优化并重新分配到最有利于用户的地方。
在web端,历史上没有这样的生命周期,应用程序可以一直保持激活。随着大量网页的运行,内存、CPU、电池和网络等关键系统资源可能会被过度订阅,从而导致终端用户体验差。
虽然web平台早就有了与生命周期状态相关的事件,比如 load, unload, and visibilitychange,但这些事件只允许开发人员响应用户行为的生命周期状态更改。为了让web在低功耗设备上可靠地工作(并且在所有平台上都能展示更多资源),浏览器需要一种主动回收和重新分配系统资源的方法。
事实上,如今的浏览器已经采取了积极的措施来节省后台选项卡中页面的资源,许多浏览器(尤其是Chrome浏览器)都想做更多的工作,以减少它们的总体资源占用。
问题是,目前开发者还没法干预这些系统启动,即使知道它们正在启动,这就意味着,浏览器需要采用保守的策略或者冒着页面出错的风险。
页面生命周期API试图通过以下方式解决此问题 ...
CSS Masking Module Level 1
CSS Masking Module Level 1—-W3C候选人推荐,2014年8月26日
此版本:
http://www.w3.org/TR/2014/CR-css-masking-1-20140826/
最新版本:
http://www.w3.org/TR/css-masking-1
编辑草案:
http://dev.w3.org/fxtf/css-masking-1/
先前版本:
http://www.w3.org/TR/2014/WD-css-masking-1 -20140522
反馈:
public-fx@w3.org with subject line “[css-masking] … message topic …”(archives)
测试套件:
http://test.csswg.org/suites/css-masking/nightly-unstable/
编辑:
Dirk Schulze(Adobe S ...
Media Source Extensions
Media Source Extensions™—-W3C编辑的草案2016年11月8日
http://w3c.github.io/media-source/
最新发布的版本:
https://www.w3.org/TR/media-source/
最新编辑的草稿:
http://w3c.github.io/media-source/
实施报告:
http://tidoust.github.io/media-source-testcoverage/
编辑:
Matthew Wolenetz,Google Inc.; Jerry Smith,微软公司; Mark Watson,Netflix Inc.; Aaron Colwell(2015年4月),Google Inc.; Adrian Bateman(2015年4月),Microsoft Corporation
Repository:
We are on GitHub
File a bug
Commit history
Mailing list:
public-html-media@w3.org
Implementation:
...
H.264视频的RTP有效负载格式
H.264视频的RTP有效负载格式Version 10.1
备忘
该文件为因特网社区规定了因特网标准跟踪协议,并提出了改进建议和讨论。Please refer to the current edition of the“Internet official Protocol standards”(STD 1)for the standardization state and status of this Protocol.这个MEMO的分布是无限的。
Copyright Notice
Copyright (C) The Internet Society (2005).
摘要
本备忘录描述了ITU-T建议H.264视频编解码器的RTP有效载荷格式和技术上相同的ISO/IEC国际标准14496-10视频编解码器。RTP有效负载格式允许对每个RTP有效负载中由H.264视频编码器生成的一个或多个网络抽象层单元(NALU)进行打包。有效载荷格式具有广泛的适用性,因为它支持从简单的低比特率会话使用,到Internet视频流与交错传输,到高比特率视频点播的应用。
1. 介绍
1.1. H.264编解 ...
f4v文件格式
Adobe Flash Video File Format Specification Version 10.1
Introduction
Flash®是Web上动态媒体的事实标准,支持多种媒体格式,包括两种用于提供同步音频和视频流的核心容器格式:
F4V, for H.264/AAC–based content, and
FLV, for other supported codecs such as Sorensen Spark and On2 VP6.
本文档提供Adobe®产品支持的F4V和FLV视频文件格式的技术格式信息。Adobe认真考虑所有对视频文件格式规范的反馈。 通过flashformat@adobe.com将规范中任何不清楚或可能错误的信息通过电子邮件发送给Adobe。 所有此类电子邮件提交均应遵守使用条款中的提交材料指南,网址为www.ado ...
设计模式
设计模式设计模式(Design pattern)代表了最佳的实践,是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。
单例模式
单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
应用场景:
创建唯一的浮窗(闭包)
const getSingle = function( fn ){ const result; return function(){ return result || ( result = fn .apply(this, arguments ) ); } };const createLoginLayer = function(){ const div = document.createElement( ...
Web框架本质-Django
Web框架本质web系统概念
1. Http,无状态,短连接 2. 浏览器(socket客户端)、网站(socket服务端)
web框架本质
import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n") client.send("Hello, Seven") def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) sock.bind(('localhost',8000)) sock.listen(5) while True: connection, address = sock.accept() handle_request(connection) connection.close() if __name__ == '__main__': main()
自定义Web框架
a ...
Gitlab CI/CD管道配置参考
Gitlab CI/CD管道配置参考在每个项目中,使用名为.gitlab-ci.yml的yaml文件配置Gitlab CI/CD管道。
.gitlab-ci.yml文件定义了管道的结构和顺序,并确定:
使用Gitlab Runner执行什么。
遇到特殊情况时要做什么决定?例如,当一个进程成功或失败时。
本主题介绍CI/CD管道配置。有关其他CI/CD配置信息,请参阅:
Gitlab CI/CD变量,用于配置管道运行的环境。
Gitlab Runner高级配置,用于配置Gitlab Runner。
我们有配置管道的完整示例:
要快速介绍Gitlab CI,请遵循我们的快速入门指南。
有关示例的集合,请参见Gitlab CI/CD示例。
要查看企业中使用的大型.gitlab-ci.yml文件,请参见gitlab ce的.gitlab-ci.yml文件。
如果你有一个镜像存储库,其中有gitlab,你可能需要在项目的Settings > Repository > Pull from a remote repository > Trigger镜像更新管道。
1. 介绍
...
django2.2版本中pymysql报错
我们从浏览器发出一个请求 Request,得到一个响应后的内容 HttpResponse ,这个请求传递到 Django的过程如下:
也就是说,每一个请求都是先通过中间件中的 process_request 函数,这个函数返回 None 或者 HttpResponse 对象,如果返回前者,继续处理其它中间件,如果返回一个 HttpResponse,就处理中止,返回到网页上。
中间件不用继承自任何类(可以继承 object ),下面一个中间件大概的样子:
class CommonMiddleware(object): def process_request(self, request): return None def process_response(self, request, response): return response
还有 process_view, process_exception 和 process_template_response 函数。
一,比如我们要做一个 拦截器,发现有恶意访问网站的人,就拦截他!假如我们通过 ...
python中的装饰器
函数外可以访问函数内的变量写个简单的装饰器def get_result(func): def warp(*args, **kwargs): print('haha warp') result = func(*args, **kwargs) print('result:', result) return result return warp@get_resultdef add(a, b): print('func add:', a + b) return a + bif __name__ == '__main__': add(1, 2)
执行结果:
haha warpfunc add: 3result: 3
解释:
add会作为参数func传给get_result函数,然后get_result返回warp函数。
执行add.__name__会输出wrap
其实这是python解释器在背后吧warp赋值给了add,然 ...
Django配置Ajax跨域调用/设置Cookie
django-cors-headers一、跨域调用首先下载这个插件
pip install django-cors-headers
然后在你的Django项目中的settings.py中做如下配置(install app和middleware):
INSTALLED_APPS = ( ... 'corsheaders', ...)MIDDLEWARE = [ # Or MIDDLEWARE_CLASSES on Django < 1.10 ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ...]
要注意的是,CorsMiddleware最好放的尽可能的往上,比如要 在CommonMiddleware和WhiteNoiseMiddleware的上边,要不然设置的跨域响应头可能起不了什么作用。
最后配置一下你允许的跨域请求主机
允许所有主机请求 ...
django2.2版本中pymysql报错
ImproperlyConfigured: mysqlclient 1.3.13 or newer is required
1、问题背景:已经安装好了 pymysql,但是在命令行执行 python3 manage.py migrate 进行数据迁移时报如下错误:(当然,你也可能是在执行其它操作时遇到类似错误)
...... File "/Library/Frameworks/Python.framework/Versions/3.7/lib/python3.7/importlib/__init__.py", line 127, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "/Library/Frameworks/Python.framework/Versions/3.7/lib& ...
webpack 编写一个plugin
创建插件比创建 loader 更加高级,因为你将需要理解一些 webpack 底层的内部特性来实现相应的钩子,所以做好阅读一些源码的准备!
编写一个插件
一个插件由以下构成
一个具名 JavaScript 函数。
在它的原型上定义 apply 方法。
指定一个触及到 webpack 本身的 事件钩子。
操作 webpack 内部的实例特定数据。
在实现功能后调用 webpack 提供的 callback。
// 一个 JavaScript classclass MyExampleWebpackPlugin { // 将 `apply` 定义为其原型方法,此方法以 compiler 作为参数 apply(compiler) { // 指定要附加到的事件钩子函数 compiler.hooks.emit.tapAsync( 'MyExampleWebpackPlugin', (compilation, callback) => { console. ...
webpack 4 Code Splitting 的 splitChunks
webpack 4 废弃了之前的不怎么好用的 CommonsChunk,取而代之的是 SplitChunks
Code Splitting首先 webpack 总共提供了三种办法来实现 Code Splitting,如下:入口配置:entry 入口使用多个入口文件;抽取公有代码:使用 SplitChunks 抽取公有代码;动态加载 :动态加载一些代码。
SplitChunks首先我们所说的 SplitChunks 是由 webpack 4 内置的 SplitChunksPlugin 插件提供的能力,可直接在 optimization 选项中配置,其默认配置如下:
module.exports = { //... optimization: { splitChunks: { chunks: 'async', minSize: 30000, maxSize: 0, minChunks: 1, maxA ...
Github + Webhooks 自动化部署流程(vue-ssr
一、先说明下最终要实现的效果
1、服务器监听 GitHub,push代码后,拉取最新代码
2、安装依赖,打包代码
3、把打包的文件(dist/*)移动到发布目录,并命名(next
4、把正在运行的目录(dist)重命名(pre),(next)重命名(dist)
5、重启服务二、GitHub的webhooks
三、创建 webhook 服务后端webhook.js
<span style="font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;">const http = require("http");</span>const createHandler = require("github-webhook-handler");const handler = createHandler({ path: "/", secre ...
git的commit规范及强制校验
commitlint 配合husky 在git push 代码之前检测commit messages
https://github.com/typicode/husky
https://commitlint.js.org/#/
Commit message 和 Change log 编写指南
一:安装commitlintnpm install -D @commitlint/cli @commitlint/config-conventional
生成配置文件:> commitlint.config.js
module.exports = { extends: ['@commitlint/config-conventional'], rules: { 'type-enum': [2, 'always', [ "feat", "fix", "docs", "style", "refacto ...
terser-webpack-plugin
github
Getting StartedTo begin, you’ll need to install terser-webpack-plugin:
$ npm install terser-webpack-plugin --save-dev
Then add the plugin to your webpack config. For example:
webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');module.exports = { optimization: { minimizer: [new TerserPlugin()], },};
参数:
test:Type: String|RegExp|Array<String|RegExp> Default: /\.m?js(\?.*)?$/i
include/exclude:
Type: String|RegExp|Arr ...
webpack 打包结构
window[ "YYJ" ] =( function ( modules ) { // webpackBootstrap // The module cache var installedModules = {}; // The require function function __webpack_require__ ( moduleId ) { // Check if module is in cache if (installedModules[moduleId]) { return installedModules[moduleId].exports; } // Create a new module (and put it into the cache) var module = installedModules[moduleId] ...
webpack 编写一个loader
loader就是一个node模块,它输出了一个函数。
当某种资源需要用这个loader转换时,这个函数会被调用。并且,这个函数可以通过提供给它的this上下文访问Loader API。reverse-txt-loader定义
module.exports = function(src) { //src是原文件内容(abcde),下面对内容进行处理,这里是反转 var result = src.split('').reverse().join(''); //返回JavaScript源码,必须是String或者Buffer return `module.exports = '${result}'`;}
// 使用
{ test: /\\.txt$/, use: [ { './path/reverse-txt-loader' } ]}
lo ...
移动端知识的一些总结
一.css部分1.meta标签
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>
移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应缩小了 (980px是相对于手机像素的,我的是超过1000px多一些就出现滚动条了,这个没具体研究)。关于 initial-scale=1 ,这个参照iphone5的尺寸320568,如果你页面按照6401136做的话,scale就设为0.5
<!-- IOS中safari允许全屏浏览 --><meta content="yes" name="apple-mobile-web-app-capable"> <!-- IOS中Safari顶端状态条样式 -->& ...
Babel原理及其使用
Babel的包构成核心包babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。babylon:js的词法解析器babel-traverse:用于对AST(抽象语法树,想了解的请自行查询编译原理)的遍历,主要给plugin用babel-generator:根据AST生成代码
功能包babel-types:用于检验、构建和改变AST树的节点babel-template:辅助函数,用于从字符串形式的代码来构建AST树节点babel-helpers:一系列预制的babel-template函数,用于提供给一些plugins使用babel-code-frames:用于生成错误信息,打印出错误点源代码帧以及指出出错位置babel-plugin-xxx:babel转译过程中使用到的插件,其中babel-plugin-transform-xxx是transform步骤使用的babel-preset-xxx:transform阶段使用到的一系列的pl ...
npm包开发调试
开发NPM模块的时候,有时我们会希望,边开发边试用,比如本地调试的时候,
require('myModule')
会自动加载本机开发中的模块。Node规定,使用一个模块时,需要将其安装到全局的或项目的 node_modules 目录之中。对于开发中的模块,解决方法就是在全局的 node_modules 目录之中,生成一个符号链接,指向模块的本地目录。
npm link 就能起到这个作用,会自动建立这个符号链接。
请设想这样一个场景,你开发了一个模块 myModule ,目录为 src/myModule ,你自己的项目 myProject 要用到这个模块,项目目录为 src/myProject
第一步
在模块目录( src/myModule )下运行 # src/myModule$ npm link npm link
会在NPM的全局模块目录内,生成一个符号链接文件,该文件的名字就是package.json 文件中指定的模块名
/path/to/global/node_modules/myModule -> src/myModule
...
红小豆语录
一、术语1、音名:
C D E F GA B
2、唱名:
1 2 3 4 5 6 7 do re mi fasol la si
注:若是C调,则是1(do)对应这C,若是D调,则是1(do)对应这D;(一脸无辜,这是什么啊?
3、吉他常用音阶模式图(吉他中相邻品格为半音关系,也就是,E与F、B和C之间只差半音,其他都是全音)
注: 这咋那么多啊(外面下雪了,可大了o(╥﹏╥)o
4、十二平均律:
将do、re、mi、sol、la、si、do这个八度音程平均分成12份(可以看做对应吉他的0到12品,12品的E正好比空弦升一个八度
用钢琴的键比较易懂一点(正好一个八度十二个键,相邻键为半音关系(不知道能不能这么解释?
以下为钢琴88键从左到右对应的绝对中心频率:(中央C 对应: 261.626,摘自维基百科
12键CC#D D#E F F#G G# AA# B 大字二组 27.5000 29.1352 30.8677大字一组32.7032 34.6478 36.7081 38.8909 41.203443.6535 46.2493 48.99 ...
《Java工程师修炼之道》
什么是最左前缀原则?MySQL中的索引可以以一定顺序引用多列,这种索引叫作联合索引。如User表的name和city加联合索引就是(name,city),而最左前缀原则指的是,如果查询的时候查询条件精确匹配索引的左边连续一列或几列,则此列就可以被用到。如下:
select * from user where name=xx and city=xx ; //可以命中索引select * from user where name=xx ; // 可以命中索引select * from user where city=xx ; // 无法命中索引
这里需要注意的是,查询的时候如果两个条件都用上了,但是顺序不同,如 city= xx and name =xx,那么现在的查询引擎会自动优化为匹配联合索引的顺序,这样是能够命中索引的。
由于最左前缀原则,在创建联合索引时,索引字段的顺序需要考虑字段值去重之后的个数,较多的放前面。ORDER BY子句也遵循此规则。
注意避免冗余索引冗余索引指的是索引的功能相同,能够命中就肯定能命中 ,那么 就是冗余索引如(name,city )和 ...
JSON Web Token
Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519).该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO)场景。
一、跨域认证的问题互联网服务离不开用户认证。一般流程是下面这样。
1、用户向服务器发送用户名和密码。
2、服务器验证通过后,在当前对话(session)里面保存相关数据,比如用户角色、登录时间等等。
3、服务器向用户返回一个 session_id,写入用户的 Cookie。
4、用户随后的每一次请求,都会通过 Cookie,将 session_id 传回服务器。
5、服务器收到 session_id,找到前期保存的数据,由此得知用户的身份。
这种模式的问题在于,扩展性(scaling)不好。单机当然没有问题,如果是服务器集群,或者是跨域的服务导向架构,就要求 session 数据共享,每台服务器都能够读取 session。
举例来说,A 网站和 B 网站是同一家公司的关联服务。现在要求,用户只要在其中一个网站登录,再访问另一个网站就会自动登录,请问怎么实现?
一种解决 ...
Nodejs定时任务(node-schedule)
定时导出某些数据、定时发送消息或邮件给用户、定时备份什么类型的文件等等
安装npm install node-schedule --save 或者 yarn add node-schedule
用法1、Cron风格定时器const schedule = require('node-schedule');const scheduleCronstyle = ()=>{ //每分钟的第30秒定时执行一次: schedule.scheduleJob('30 * * * * *',()=>{ console.log('scheduleCronstyle:' + new Date()); }); }scheduleCronstyle();
schedule.scheduleJob的回调函数中写入要执行的任务代码,一个定时器就完成了!
规则参数讲解 *代表通配符* * * * * *┬ ┬ ┬ ┬ ┬ ┬│ │ │ │ │ |│ ...
node ws模块
认识 TCP
TCP 协议可以总结几个特点:有状态的长连接:客户端发起连接请求,服务端响应并建立连接,连接会一直保持直到一方主动断开。主动性:建立起与客户端的连接后,服务端可主动向客户端发起调用。信息安全性:同样可以使用 SSL 证书进行信息加密,访问时用 WSS 。跨域:默认支持跨域。
编写聊天室源码ws-with-koa
服务端 API安装第三方模块 ws:npm install ws开启一个 WebSocket 的服务器,端口为 8080
var socketServer = require('ws').Server;var wss = new socketServer({ port: 8080});
也可以利用 Express 来开启 WebSocket 的服务器
var app = require('express')();var server = require('http').Server(app);var socketServer = require('ws') ...
基于Node.js的WebSocket通信
假如A,B,C,D用户均通过客户端连接到Websocket服务,其中每个人发的消息都需要将其通过Websocket转发给其他人,此场景类似于服务端将A的消息广播给组内其他用户。
服务端实现首先来看服务端程序,具体的工作流程分以下几步:创建一个WebSocketServer的服务,同时监听8080端口的连接请求。每当有新的客户端连接该WebSocket成功时,便将该连接push到连接池的数组中。监听message事件,当该事件发生时,遍历连接池,以连接为单位将该消息转发到对应的客户端监听close事件,当该事件发生时,将该连接移出连接池
# 服务端代码var WebSocketServer = require('ws').Server,wss = new WebSocketServer({port: 8080});// 连接池var clients = [];wss.on('connection', function(ws) { // 将该连接加入连接池 clients.push(ws ...
npm 包发布流程
【npm】利用npm安装/删除/发布/更新/撤销发布包
npm adduser用于在npmjs.com注册一个用户。
已注册 npm login
npm publish
注意:登录时报错:e409 Conflict
Registry returned 409 for PUT on http://registry.npm.taobao.org/-/user/org.couchdb.user:666: conflict
出现这个错误最大的可能性是我们把registry选项替换成了淘宝的镜像
登录前确保npm源为官方源:
nrm lsnrm use npm
npm config set registry https://registry.npmjs.org/
解决方案npm login --registry http://registry.npmjs.orgnpm publish --registry http://registry.npmjs.org
细节:
发布一个beta版,默认为latest
npm publish --tag beta
如果想废弃某个版本的 ...
使用Node 开发命令行程序
一、可执行脚本1.demo文件头添加这一行
#!/usr/bin/env nodeconsole.log(hello world)
在package.json中添加"bin": { "hello": "./demo.js",},
在命令行执行:(下篇文章介绍)npm link
然后就可以执行 hello 命令 运行demo里面的内容。
二、yargs 模块npm i -save yargs
const argv = require('yargs').option('v', { alias : 'version', demand: true, // 后面的参数是否可以省略 default: '0.0.0', describe: '版本号', type: string, boolean:true, // 是否强制转换成布尔值} ...
Express中间件
Express 是一个路由和中间件 Web 框架,其自身只具有最低程度的功能:Express 应用程序基本上是一系列中间件函数调用。
中间件函数能够访问请求对象 (req)、响应对象 (res) 以及应用程序的请求/响应循环中的下一个中间件函数。下一个中间件函数通常由名为 next 的变量来表示。
中间件函数可以执行以下任务:<执行任何代码。<对请求和响应对象进行更改。<结束请求/响应循环。<调用堆栈中的下一个中间件函数。如果当前中间件函数没有结束请求/响应循环,那么它必须调用 next(),以将控制权传递给下一个中间件函数。否则,请求将保持挂起状态。
Express 应用程序可以使用以下类型的中间件:应用层中间件路由器层中间件错误处理中间件内置中间件第三方中间件
应用层中间件:此示例显示没有安装路径的中间件函数。应用程序每次收到请求时执行该函数。
var app = express();app.use(function (req, res, next) { console.log('Time:', Date.now()) ...
WebSocket
WebSocket是HTML5新增的协议,它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道,比如说,服务器可以在任意时刻发送消息给浏览器。
WebSocket协议WebSocket并不是全新的协议,而是利用了HTTP协议来建立连接。我们来看看WebSocket连接是如何创建的。
首先,WebSocket连接必须由浏览器发起,因为请求协议是一个标准的HTTP请求,格式如下:
GET ws://localhost:3000/ws/chat HTTP/1.1Host: localhostUpgrade: websocketConnection: UpgradeOrigin: http://localhost:3000Sec-WebSocket-Key: client-random-stringSec-WebSocket-Version: 13
该请求和普通的HTTP请求有几点不同:GET请求的地址不是类似/path/,而是以ws://开头的地址;请求头Upgrade: websocket和Connection: Upgrade表示这个连接将要被转换为WebSocket连接; ...
XHR获取arraybuffer
ArrayBuffer对象代表原始的二进制数据,TypedArray视图用来读写简单类型的二进制数据,DataView视图用来读写复杂类型的二进制数据。
1. 文件格式 (mask file layout)1.0 综述 (overview)-----------------------------------| mask file header |-----------------------------------| mask frame indexing table |-----------------------------------| ... ... || ... ... |-----------------------------------| mask frames data segment |-----------------------------------图 1.0总体而言, 文件的格式为: 文件头 + 帧索引表 + 若干帧数据段, 这三部分数据紧邻地存放于mask文件中, 位置关系如图1.0所示.1.1 文件头 (mask file head ...
http连接优化与浏览器允许的并发请求资源数
前端技术的逐渐成熟,还衍生了domain hash, cookie free, css sprites, js/css combine, max expires time, loading images on demand等等技术。这些技术的出现和大量使用都和并发资源数有关
原文地址1、按照普通设计,当网站cookie信息有1 KB、网站首页共150个资源时,用户在请求过程中需要发送150 KB的cookie信息,在512 Kbps的常见上行带宽下,需要长达3秒左右才能全部发送完毕。 尽管这个过程可以和页面下载不同资源的时间并发,但毕竟对速度造成了影响。 而且这些信息在js/css/images/flash等静态资源上,几乎是没有任何必要的。 解决方案是启用和主站不同的域名来放置静态资源,也就是cookie free。
2、将css放置在页面最上方应该是很自然的习惯,但第一个css内引入的图片下载是有可能堵塞后续的其他js的下载的。而在目前普遍过百的整页请求数的前提下,浏览器提供的仅仅数个并发,对于进行了良好优化甚至是前面有CDN的系统而言,是极大的性能瓶颈。 这也就衍生了dom ...
从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)
主要过程是:
浏览器解析->查询缓存->dns 查询
->建立链接->服务器处理请求->服务器发送响应->客户端收到页面
->解析 HTML->构建渲染树->开始显示内容(白屏时间)->首屏内容加载完成(首屏时间)
->用户可交户(DOMContentLoaded)->加载完成(load)
1、在浏览器地址栏输入URL
2、浏览器查看 缓存,如果请求资源在缓存中并且新鲜,跳转到转码步骤
如果资源未缓存,发起新请求
如果已缓存,检验是否足够新鲜,足够新鲜直接提供给客户端,否则与服务器进行验证。
检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control:
HTTP1.0提供Expires,值为一个绝对时间表示缓存新鲜日期
HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间
3、浏览器解析URL获取协议,主机,端口,path
4、浏览器组装一个HTTP(GET)请求报文
5、浏览器获取主机ip地址,过程如下:
浏览器缓存
本机缓存
...
对称加密、非对称加密、RSA(总结)
对称加密算法(Symmetric-key algorithm)和非对称加密算法(asymmetric key encryption algorithm)只不过就是密码学(cryptography)中的两种加密算法
对称加密(英语:Symmetric-key algorithm)又称为对称加密、私钥加密、共享密钥加密,是密码学中的一类加密算法。这类算法在加密和解密时使用相同的密钥,或是使用两个可以简单地相互推算的密钥。实务上,这组密钥成为在两个或多个成员间的共同秘密,以便维持专属的通讯联系。与公开密钥加密相比,要求双方取得相同的密钥是对称密钥加密的主要缺点之一
常见的对称加密算法有DES、3DES、AES、Blowfish、IDEA、RC5、RC6。
公开密钥加密(英语:public-key cryptography,又译为公开密钥加密),也称为非对称加密(asymmetric cryptography)
一种密码学算法类型,在这种密码学方法中,需要一对密钥,一个是私人密钥,另一个则是公开密钥。这两个密钥是数学相关,用某用户密钥加密后所得的信息,只能用该用户的解密密钥才能解密。如果知 ...
TCP详解
TCP(Transmission Control Protocol 传输控制协议)是一种面向连接的、可靠的、基于字节流的传输层通信协议。
首先来看看OSI的七层模型:
我们需要知道:
一:TCP工作在网络OSI的七层模型中的第四层——Transport层,第四层的数据叫Segment。
二:IP在第三层——Network层,在第三层上的数据叫Packet。
三:ARP在第二层——Data Link层;在第二层上的数据,我们把它叫Frame。
同时,我们需要简单的知道,数据从应用层发下来,会在每一层都会加上头部信息,进行封装,然后再发送到数据接收端。这个基本的流程你需要知道,就是每个数据都会经过数据的封装和解封装的过程。
TCP头部其中 ACK SYN 序号 这三个部分在以下会用到,它们的介绍也在下面。
上面就是TCP协议头部的格式,由于它太重要了,是理解其它内容的基础,下面就将每个字段的信息都详细的说明一下。
1、Source Port和Destination Port:分别占用16位,表示源端口号和目的端口号;用于区别主机中的不同进程,而IP地址是用来区分不同的主机的,源端口号 ...
HTTP 请求方法:GET 和 POST
GET - 从指定的资源请求数据。POST - 向指定的资源提交要被处理的数据。
GET 方法请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:
/test/demo_form.php?name1=value1&name2=value2有关 GET 请求的其他一些注释:GET 请求可被缓存GET 请求保留在浏览器历史记录中GET 请求可被收藏为书签GET 请求不应在处理敏感数据时使用GET 请求有长度限制GET 请求只应当用于取回数据
POST 方法请注意,查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的:
POST /test/demo_form.php HTTP/1.1
Host: w3cschool.cn
name1=value1&name2=value2
有关 POST 请求的其他一些注释:
POST 请求不会被缓存 POST 请求不会保留在浏览器历史记录中 POST 不能被收藏为书签 POST 请求对数据长度没有要求
比较 GET 与 POST下面的表格比较了两种 HTTP ...
HTTP 与 HTTPS
HTTPS(Hypertext Transfer Protocol Secure:超文本传输安全协议)是一种透过计算机网络进行安全通信的传输协议。HTTPS 经由 HTTP 进行通信,但利用 SSL/TLS 来加密数据包。HTTPS 开发的主要目的,是提供对网站服务器的身份认证,保护交换数据的隐私与完整性。
HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式、协作式和超媒体信息系统的应用层协议。 简单来说就是一种发布和接收 HTML 页面的方法,被用于在 Web 浏览器和网站服务器之间传递信息。
HTTP 默认工作在 TCP 协议 80 端口,用户访问网站 http:// 打头的都是标准 HTTP 服务。
HTTP 协议以明文方式发送内容,不提供任何方式的数据加密,如果攻击者截取了Web浏览器和网站服务器之间的传输报文,就可以直接读懂其中的信息,因此,HTTP协议不适合传输一些敏感信息,比如:信用卡号、密码等支付信息。
HTTPS 默认工作在 TCP 协议443端口,它的工作流程一般如以下方式:
1、TCP 三次同步握手2、客户端验证 ...
HTTP的神秘面纱
OSI(Open System Interconnect),即开放式系统互联。 一般都叫OSI参考模型,是ISO(国际标准化组织)组织在1985年研究的网络互连模型。
各层的作用
1.物理层:
主要定义物理设备标准,如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。它的主要作用是传输比特流(就是由1、0转化为电流强弱来进行传输,到达目的地后在转化为1、0,也就是我们常说的数模转换与模数转换)。这一层的数据叫做比特。
2.数据链路层:
定义了如何让格式化数据以进行传输,以及如何让控制对物理介质的访问。这一层通常还提供错误检测和纠正,以确保数据的可靠传输。
3.网络层:
在位于不同地理位置的网络中的两个主机系统之间提供连接和路径选择。Internet的发展使得从世界各站点访问信息的用户数大大增加,而网络层正是管理这种连接的层。
4.传输层:
定义了一些传输数据的协议和端口号(WWW端口80等),如:
TCP(transmission control protocol –传输控制协议,传输效率低,可靠性强,用于传输可靠性要求高,数据量大的数据)UDP(us ...
HTTP 简介
HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送协议。
W3CHTTP 工作原理HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器有:Apache服务器,IIS服务器(Internet Information Services)等。Web服务器根据接收到的请求后,向客户端发送响应信息。HTTP默认端口号为80,但是你也可以改为8080或者其他端口。
HTTP三点注意事项:
HTTP是无连接:无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求,并收到客户的应答后,即断开连接。采用这种方式可以节省传输时间。
HTTP是媒体独立的:这意味着,只要客户端和服务器知道如何处理的数据内容,任何类型的数据都可以通过HTTP发送。客户端以及服务器指定使用适合的MIME-type内容类型。
HTTP是无状态:HTTP协议是无状态协议。无状态是指协议对于事务处理没 ...
HTTP 状态消息
以Chrome 浏览器为例:(访问: www.google.com
1、 Chrome 浏览器 会首先搜索浏览器自身的 DNS 缓存(缓存时间比较短,大概只有 1 分钟,且只能容纳 1000 条缓存),看自身的缓存中是否有 www.google.com 对应的条目,而且没有过期,如果有且没有过期则解析到此结束。
注:我们怎么查看Chrome自身的缓存?可以使用 chrome://net-internals/#dns 来进行查看
2、如果浏览器自身的缓存里面没有找到对应的条目,那么 Chrome 会搜索操作系统自身的 DNS 缓存,如果找到且没有过期则停止搜索解析到此结束.
注:怎么查看操作系统自身的DNS缓存,以Windows系统为例,可以在命令行下使用 ipconfig /displaydns 来进行查看
3、如果在 Windows 系统的 DNS 缓存也没有找到,那么尝试读取 hosts 文件(位于 C:\Windows\System32\drivers\etc),看看这里面有没有该域名对应的 IP 地址,如果有则解析成功。
4、如果在 hosts 文件中也没有找到对应的条 ...
Http 206 文件断点续传下载原理
断点续传下载需要重视2对头信息Accept-Ranges/Range与If-Range/tag
断点续传检测服务器端是否支持范围请求假如在响应中存在 Accept-Ranges 首部(并且它的值不为 “none”),那么表示该服务器支持范围请求。例如,你可以使用 cURL 发送一个 HEAD 请求来进行检测。
curl -I http://i.imgur.com/z4d4kWk.jpgHTTP/1.1 200 OK...Accept-Ranges: bytesContent-Length: 146515
在上面的响应中, Accept-Ranges: bytes 表示界定范围的单位是 bytes 。这里 Content-Length 也是有效信息,因为它提供了要检索的图片的完整大小。
如果站点未发送 Accept-Ranges 首部,那么它们有可能不支持范围请求。一些站点会明确将其值设置为 “none”,以此来表明不支持。在这种情况下,某些应用的下载管理器会将暂停按钮禁用。
curl -I https://www.youtube.com/watch?v=EwTZ2xpQwpAH ...
HTTP 状态消息
1xx: 信息该状态码属于临时响应类型,代表请求已被接受,需要继续处理。
该类状态码只包含状态行和某些可选的响应头信息,并以空行结束。
消息:描述:100 Continue服务器仅接收到部分请求,但是一旦服务器并没有拒绝该请求,客户端应该继续发送其余的请求。101 Switching Protocols服务器转换协议:服务器将遵从客户的请求转换到另外一种协议。103 Checkpoint用于 PUT 或者 POST 请求恢复失败时的恢复请求建议。
2xx: 成功该类型的状态码,表示请求已成功被服务器接收、理解、并接受。
消息:描述:200 OK请求成功(这是对HTTP请求成功的标准应答。)201 Created请求被创建完成,同时新的资源被创建。202 Accepted供处理的请求已被接受,但是处理未完成。203 Non-Authoritative Information请求已经被成功处理,但是一些应答头可能不正确,因为使用的是其他文档的拷贝。204 No Content请求已经被成功处理,但是没有返回新文档。浏览器应该继续显示原来的文档。如果用户定期地刷新页面,而Servlet可以 ...
跨域资源共享 CORS 详解
CORS是一个W3C标准,全称是”跨域资源共享”(Cross-origin resource sharing)。 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。
一、简介CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
二、两种请求浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。只要同时满足以下两大条件,就属于简单请求。(1) 请求方法是以下三种方法之一:HEADGETPOST(2)HTTP的头信息不超出以下几种字段:AcceptAccept-LanguageContent-Lang ...
HTTP1.0、HTTP1.1 和 HTTP2.0 的区别
一、HTTP的基本优化
影响一个 HTTP 网络请求的因素主要有两个:带宽和延迟。
带宽:忽略。
延迟:
浏览器阻塞(HOL blocking):浏览器会因为一些原因阻塞请求。浏览器对于同一个域名,同时只能有 4 个连接(这个根据浏览器内核不同可能会有所差异),超过浏览器最大连接数限制,后续请求就会被阻塞。
DNS 查询(DNS Lookup):浏览器需要知道目标服务器的 IP 才能建立连接。将域名解析为 IP 的这个系统就是 DNS。这个通常可以利用DNS缓存结果来达到减少这个时间的目的。
建立连接(Initial connection):HTTP 是基于 TCP 协议的,浏览器最快也要在第三次握手时才能捎带 HTTP 请求报文,达到真正的建立连接,但是这些连接无法复用会导致每次请求都经历三次握手和慢启动。三次握手在高延迟的场景下影响较明显,慢启动则对文件类大请求影响较大。
二、HTTP1.0和HTTP1.1的一些区别缓存处理:HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准,HTTP1.1则引入了更多的缓存 ...
正向代理与反向代理的区别
正向代理代理的对象是客户端,反向代理代理的对象是服务端
1. 概念正向代理是一个位于客户端和目标服务器之间的代理服务器(中间服务器)。为了从原始服务器取得内容,客户端向代理服务器发送一个请求,并且指定目标服务器,之后代理向目标服务器转交并且将获得的内容返回给客户端。正向代理的情况下客户端必须要进行一些特别的设置才能使用。
反向代理正好相反。对于客户端来说,反向代理就好像目标服务器。并且客户端不需要进行任何设置。客户端向反向代理发送请求,接着反向代理判断请求走向何处,并将请求转交给客户端,使得这些内容就好似他自己一样,一次客户端并不会感知到反向代理后面的服务,也因此不需要客户端做任何设置,只需要把反向代理服务器当成真正的服务器就好了。
2. 区别 正向代理需要你主动设置代理服务器ip或者域名进行访问,由设置的服务器ip或者域名去获取访问内容并返回;而反向代理不需要你做任何设置,直接访问服务器真实ip或者域名,但是服务器内部会自动根据访问内容进行跳转及内容返回,你不知道它最终访问的是哪些机器。
正向代理是代理客户端,为客户端收发请求,使真实客户端对服务器不可见;而反向代理是代理 ...
Linux vi/vim
Vim是从 vi 发展出来的一个文本编辑器。代码补完、编译及错误跳转等方便编程的功能特别丰富,在程序员中被广泛使用。
原文地址
vi/vim 共分为三种模式,分别是命令模式(Command mode),输入模式(Insert mode)和底线命令模式(Last line mode)。 这三种模式的作用分别是:
命令模式:用户刚刚启动 vi/vim,便进入了命令模式。此状态下敲击键盘动作会被Vim识别为命令,而非输入字符。比如我们此时按下i,并不会输入一个字符,i被当作了一个命令。以下是常用的几个命令:
i 切换到输入模式,以输入字符。
x 删除当前光标所在处的字符。
: 切换到底线命令模式,以在最底一行输入命令。
若想要编辑文本:启动Vim,进入了命令模式,按下i,切换到输入模式。命令模式只有一些最基本的命令,因此仍要依靠底线命令模式输入更多命令。
输入模式在命令模式下按下i就进入了输入模式。在输入模式中,可以使用以下按键:
字符按键以及Shift组合,输入字符
ENTER,回车键,换行
BACK SPACE,退格键,删除光标前一个字符
DEL, ...
linux下安装软件--yum命令
在安装yum的时候,yum会建立它的软件仓库,可以通过yum repolist来查看有哪些,yum库的定义目录为/etc/yum.repos.d,一般情况下,这些预装的库能满足我们的需要,如果自己添加repository需要相应URL和密钥。
1.准备:centos7 修改yum源为阿里源,某下网络下速度比较快 首先是到yum源设置文件夹里
cd /etc/yum.repos.d
接着备份旧的配置文件 sudo mv CentOS-Base.repo CentOS-Base.repo.bak下载阿里源的文件,也可以是其他的源如(修改CentOS默认yum源为国内yum镜像源)
sudo wget -O CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
清理缓存
yum clean all
重新生成缓存
yum makecache
2.列出已经安装的软件包yum list installed 列出所有已经安装的软件包yum list packageName 在线查看软件包yum list install ...
cookie-parser 和 express-session
cookie-parser 在用 express 生成器构建项目时自动安装的,它的作用就是设置,获取和删除 cookie。express-session 依赖于它。
cookie-parser1. 引入var cookieParser = require('cookie-parser'); #引入模块app.use(cookieParser()); #挂载中间件,可以理解为实例化
这两行代码默认在app.js中写好了,表示现在可以直接使用 cookie 了。
2. 创建cookieres.cookie(name, value [, options]);
name 是 cookie 名,value 是 cookie 值,可以是 json 对象或字符串。options 是选项,详细请阅这里,常用选项有:
{ 'maxAge': 90000, # 有效时长,即90000毫秒后过期,String 'signed': false # 默认为false,表示是否签名,Boolean& ...
cookie 和 session
HTTP 是一个无状态协议,所以客户端每次发出请求时,下一次请求无法得知上一次请求所包含的状态数据
cookie首先产生了 cookie 这门技术来解决这个问题,cookie 是 http 协议的一部分,它的处理分为如下几步:1、服务器向客户端发送 cookie。通常使用 HTTP 协议规定的 set-cookie 头操作。规范规定 cookie 的格式为 name = value 格式,且必须包含这部分。2、浏览器将 cookie 保存。3、每次请求浏览器都会将 cookie 发向服务器。其他可选的 cookie 参数会影响将 cookie 发送给服务器端的过程,主要有以下几种:path:表示 cookie 影响到的路径,匹配该路径才发送这个 cookie。expires 和 maxAge:告诉浏览器这个 cookie 什么时候过期,expires 是 UTC 格式时间,maxAge 是 cookie 多久后过期的相对时间(单位:s)。当不设置这两个选项时,会产生 session cookie,session cookie 是 transient 的,当用户关闭浏览器时,就被清除 ...
前端开发者必备的Nginx知识
nginx是一个高性能的HTTP和反向代理服务器,也是一个通用的TCP/UDP代理服务器,最初由俄罗斯人Igor Sysoev编写
nginx在应用程序中的作用解决跨域请求过滤配置gzip负载均衡静态资源服务器…
nginx现在几乎是众多大型网站的必用技术,大多数情况下,我们不需要亲自去配置它,但是了解它在应用程序中所担任的角色,以及如何解决这些问题是非常必要的。
下面我将从nginx在企业中的真实应用来解释nginx在应用程序中起到的作用。
为了便于理解,首先先来了解一下一些基础知识,nginx是一个高性能的反向代理服务器那么什么是反向代理呢?正反向代理看这
基本配置配置结构下面是一个nginx配置文件的基本结构:
events { }http { server { location path { ... } location path { ... } ...
Nginx 反向代理与负载均衡
nginx负载均衡的5种策略Nginx入门Nginx 配置反向代理服务器
用户访问网站的时候首先会访问nginx服务器,然后nginx服务器再从服务器集群中选择压力较小的服务器,将该访问请求引向该服务器
nginx配置下面修改配置方面我就从mac系统下来进行简单的演示,如何安装的话也暂以mac为主了,windows系统直接去Nginx官网下载安装即可
安装nginx 1-进到homebrew官网,然后复制命令,预安装需要的东西 2-brew install nginx 安装nginx 3-nginx -v 显示版本号进入nginx cd /usr/local/etc/nginx
nginx常用命令
一、启动nginx
nginx
访问localhost:8080(默认)即可
二、关闭nginx
如果出现下图情况,不要惊慌,是因为之前nginx被启动过了
只需nginx -s stop,停止nginx服务
然后再次启动nginx即可
三、重启nginx
nginx -s reload
每次修改完.conf文件就需要重启nginx
四、检查配置
检 ...
详解root和alias指令
配置nginx的静态文件有两个指令,一个 root 和一个 alias
静态文件Nginx以其高性能著称,常用与做前端反向代理服务器。同时nginx也是一个高性能的静态文件服务器。通常都会把应用的静态文件使用nginx处理。
对于这两个指令,是否需要在路径的后面加上斜杠,经常容易让人犯晕,本文通过尝试不同的匹配规则,归纳了一个比较通用的配置方式。
基本配置与简明 Nginx Location Url 配置笔记一文关于location url配置的实验一样,本文也使用vagrant虚拟机里的nginx。其基本配置如下:
# /etc/nginx/sites-enabled/pro.confserver { listen 80 default_server; server_name localhost; access_log /var/log/nginx/pro/access.log; error_log /var/log/nginx/pro/error.log; error_page 404 /404.html; root /vagrant/pro; ...
Nginx代理ssl转发https和wss请求
使用场景什么情况下需要这种操作?
比如,后台多台服务器做反向代理;
比如,微信小程序,建立微信小程序的websocket连接,必须要使用wss,但是目前不支持自定义端口,在调用的时候会使用默认端口,这个时候就需要做个代理。
实现Nginx配置
server { listen 443; #https和wss协议默认端口 # ssl的相关配置 ssl on; ssl_certificate /usr/local/a.pem; // ssl pem文件 ssl_certificate_key /usr/local/a.key; // ssl key文件 ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5; ssl_prefer_server_ciphers on; ssl_buffer_size 1400; ...
基本的 WebSocket 的 Nginx 配置
nginx and WebSockets
先用 ws 模块写一个简单的 WebSocket 服务器:
Server = require('ws').Serverwss = new Server port: 3000wss.on ('connection', (ws) =>{ console.log 'a connection' ws.send 'started'})console.log 'server started'
然后修改 Hosts, 添加, 比如 ws.repo, 指向 127.0.0.1然后是 Nginx 配置:
server { listen 80; server_name ws.repo; location / { proxy_pass http://127.0.0.1:3000/; proxy_redirect off; proxy_http_ver ...
CentOS7下yum安装Java
一:查看yum包含的jdk版本yum search java 或者 yum list java*
版本jrejdk1.8java-1.8.0-openjdk.x86_64java-1.8.0-openjdk-devel.x86_641.7java-1.7.0-openjdk.x86_64java-1.7.0-openjdk-devel.x86_641.6java-1.6.0-openjdk.x86_64java-1.6.0-openjdk-devel.x86_64
二、安装jdk此次选择java-1.8.0-openjdk-devel.x86_64 : OpenJDK Development Environment
yum install java-1.8.0-openjdk-devel.x86_64
注:也可以安装1.8.0的所有文件yum install java-1.8.0-openjdk* -y
三: 使用命令检查是否安装成功java -version