语言g4e基础篇#3 Git安装与布局

g4e 是 Git for Enterprise
Developer的简写,这个系列文章会统一用g4e作为标识,便于大家查看和找。

Web领域的实时推送技术,也被称作Realtime技术。这种技能使达标的目的是叫用户不待刷新浏览器就可赢得实时更新。它富有广阔的运用场景,比如在线聊天室、在线客服系统、评论系统、WebIM等。

段目录

WebSocket简介

开口到Web实时推送,就只能说WebSocket。在WebSocket出现之前,很多网站为了兑现实时推送技术,通常用的方案是轮询(Polling)和Comet技术,Comet又只是划分为寡栽实现方式,一种植是增长轮询机制,一种叫做流技术,这片栽办法实际上是指向轮询技术的改良,这些方案带来特别扎眼的弱点,需要由浏览器对服务器出HTTP
request,大量吃服务器带富和资源。面对这种光景,HTML5定义了WebSocket协议,能重复好之省服务器资源和带动富并实现真正含义及之实时推送。

WebSocket共商本质上是一个基于TCP的协商,它由通信协议和编程API组成,WebSocket能够当浏览器与服务器之间建立双向连接,以基于事件的办法,赋予浏览器实时通信能力。既然是双向通信,就代表服务器端和客户端可以发送并应请求,而不再如HTTP的乞求与应。

为树立一个WebSocket连接,客户端浏览器首先要朝着服务器发起一个HTTP请求,这个请与一般的HTTP请求例外,包含了有些附加头信息,其中附加头信息”Upgrade:
WebSocket”表明这是一个申请协议升级之HTTP请求,服务器端解析这些附加的峰信息然后有对信息返回给客户端,客户端与服务器端的WebSocket连接就立起了,双方便好由此这个连续通道自由的传递信息,并且这连续会连在直到客户端或者服务器端的某某一样方主动的关门连接。

一个天下无双WebSocket客户端请求头:

语言 1

前面说到WebSocket是HTML5受到新增的平栽通信协议,这代表有老版浏览器(主要是IE10以下版本)并无负有这效果,
经过百度统计的公然数据展示,IE8目前据为33%之市场份额占据榜首,好以chrome浏览器市场份额逐年上升,现在以超过26%的市场份额位居第二,同时微软日前发布终止对IE6的技术支持并提示用户更新到新本子浏览器,这个已深受不少前端工程师也底峰疼的浏览器有望退出历史舞台,再长几乎有的智能手机浏览器还支持HTML5,所以让WebSocket的实战意义很益,但是无论如何,我们其实的门类被,仍然使考虑没有版本浏览器的相当方案:在支撑WebSocket的浏览器中以新技巧,而在无支持WebSocket的浏览器里启用Comet来接纳发送信息。

前言

WebSocket实战

正文将因多人在线聊应用作为实例场景,我们先来规定此聊天应用的着力需求。

1. 基础篇:

急需分析

1、兼容不支持WebSocket的没有版本浏览器。
2、允许客户端起雷同之用户称。
3、进入聊天室后得以视眼前在线的用户和在线人数。
4、用户上线或剥离,所有在线的客户端应该实时更新。
5、用户发送信息,所有客户端实时吸收。

在实际上的开发进程被,为了以WebSocket接口构建Web应用,我们首先用构建一个兑现了
WebSocket规范的服务端,服务端的贯彻非深受平台和支付语言的限量,只需要遵守WebSocket规范即可,目前既冒出了有的较成熟的WebSocket服务端实现,比如本文使用的Node.js+Socket.IO。为什么选用是方案吗?先来简单介绍下她们少。

  • 胡要采用版本控制系统
  • Git
    分布式版本控制系统的优势
  • Git
    安装和装
  • 初始化Git存储库(Repo)
  • 由步 1 – 创建分支和保留代码
  • 打步 2 – 了解Git历史记录
  • 起步 3 – 拉取请求 Pull Request 工作体制

Node.js

Node.js采用C++语言编写而改为,它不是Javascript应用,而是一个Javascript的运行条件,据Node.js创始人Ryan
Dahl回忆,他首梦想以Ruby来描写Node.js,但是后来意识Ruby虚拟机的属性不克满足他的求,后来他尝以V8引擎,所以选择了C++语言。

Node.js支持之网包括*nux、Windows,这代表程序员可以编制系统级或者服务器端的Javascript代码,交给Node.js来解释施行。Node.js的Web开发框架Express,可以助程序员快速建立web站点,从2009年出生至今日,Node.js的成才之快明显,其发展前景获得了技术社区的充分肯定。


Socket.IO

Socket.IO是一个开源之WebSocket库,它通过Node.js实现WebSocket服务端,同时为供客户端JS库。Socket.IO支持因事件为根基的实时双向通讯,它可干活以任何平台、浏览器还是移动设备。

Socket.IO支持4种植协议:WebSocket、htmlfile、xhr-polling、jsonp-polling,它见面活动根据浏览器选择切合之通讯方式,从而为开发者可以聚焦到功能的落实而未是平台的兼容性,同时Socket.IO具有无可争辩的风平浪静和性能。

 

编码实现

事先上演示效果图:

语言 2

可以点击这里查阅在线演示。整个开发进程非常简单,下面简单记录了出步骤:

现而已针对Git有了无与伦比基本的刺探,现在于咱们开始着手开始安装及部署Git环境。

安装Node.js

依据自己的操作系统,去Node.js官网下载安装即可。如果成功安装。在命令执行输入node -vnpm -v应该力所能及望相应的版本号。

<pre>
node -v
v0.10.26
npm -v
1.4.6
</pre>

Git工具包括Git命令行工具,图形化工具及服务器环境;在我们以此课程被,我们会动用以下软件配置我们的环境:

搭建WebSocket服务端

这环节我们尽量的设想实际生产环境,把WebSocket后端平服务多建成一个线上可以用域名访问的劳务,如果您是以本地开发环境,可以换资金地ip地址,或者下一个虚拟域名指向地方ip。

先行上及你的办事目录,比如
/workspace/wwwroot/plhwin/realtime.plhwin.com,新建一个号称也
package.json的文本,内容如下:
<pre>
{
“name”: “realtime-server”,
“version”: “0.0.1”,
“description”: “my first realtime server”,
“dependencies”: {}
}
</pre>

紧接下使用npm一声令下安装expresssocket.io
<pre>
npm install –save express
npm install –save socket.io
</pre>
安装成功后,应该好视工作目录下生成了一个叫做吧node_modules的公文夹,里面分别是expresssocket.io,接下好开始修服务端的代码了,新建一个文件:index.js

<pre>
var app = require(‘express’)();
var http = require(‘http’).Server(app);
var io = require(‘socket.io’)(http);

app.get(‘/’, function(req, res){
res.send(‘<h1>Welcome Realtime Server</h1>’);
});

http.listen(3000, function(){
console.log(‘listening on *:3000’);
});
</pre>

命执行运行node index.js,如果一切顺利,你应有会盼返回的listening on *:3000字样,这说明服务都打响搭建了。此时浏览器被打开http://localhost:3000应该好观看正常的逆页面。

若你想如果于服务运作在线上服务器,并且可以透过域名访问的口舌,可以采用Nginx做代理,再nginx.conf中添加如下配置,然后以域名(比如:realtime.plhwin.com)解析及服务器IP即可。
<pre>
server
{
listen 80;
server_name realtime.plhwin.com;
location / {
proxy_pass http://127.0.0.1:3000;
}
}
</pre>

就以上步骤,http://realtime.plhwin.com:3000的后端服务就见怪不怪搭建了。

语言 3

• Windows 操作系统(推荐使用Windows 10)
• Git for Windows (2.15或以上版本)
• Visual Studio 2017 社区免费版
• Visual Studio Code
• Cmder (Windows上最好用之命令行工具)
• Visual Studio Team Services 或者 Team Foundation Server 2018 以上版本

服务端代码实现

前方说到的index.js运转在服务端,之前的代码只是一个简练的WebServer欢迎内容,让咱们将WebSocket服务端完整的兑现代码加入进来,整个服务端就好拍卖客户端的呼吁了。完整的index.js代码如下:

<pre>
var app = require(‘express’)();
var http = require(‘http’).Server(app);
var io = require(‘socket.io’)(http);

app.get(‘/’, function(req, res){
res.send(‘<h1>Welcome Realtime Server</h1>’);
});

//在线用户
var onlineUsers = {};
//当前在线人数
var onlineCount = 0;

io.on(‘connection’, function(socket){
console.log(‘a user connected’);

//监听新用户加入
socket.on('login', function(obj){
    //将新加入用户的唯一标识当作socket的名称,后面退出的时候会用到
    socket.name = obj.userid;

    //检查在线列表,如果不在里面就加入
    if(!onlineUsers.hasOwnProperty(obj.userid)) {
        onlineUsers[obj.userid] = obj.username;
        //在线人数+1
        onlineCount++;
    }

    //向所有客户端广播用户加入
    io.emit('login', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
    console.log(obj.username+'加入了聊天室');
});

//监听用户退出
socket.on('disconnect', function(){
    //将退出的用户从在线列表中删除
    if(onlineUsers.hasOwnProperty(socket.name)) {
        //退出用户的信息
        var obj = {userid:socket.name, username:onlineUsers[socket.name]};

        //删除
        delete onlineUsers[socket.name];
        //在线人数-1
        onlineCount--;

        //向所有客户端广播用户退出
        io.emit('logout', {onlineUsers:onlineUsers, onlineCount:onlineCount, user:obj});
        console.log(obj.username+'退出了聊天室');
    }
});

//监听用户发布聊天内容
socket.on('message', function(obj){
    //向所有客户端广播发布的消息
    io.emit('message', obj);
    console.log(obj.username+'说:'+obj.content);
});

});

http.listen(3000, function(){
console.log(‘listening on *:3000’);
});
</pre>

Git for Windows 安装

斯设置了起几乎单地方大家只顾修改一下默认配置,这样可于后的操作经验越来越流畅。

语言 4

达成图备受最终2个如选中,TrueType字体让命令行中的字更是清晰,每天检查更新保证你可直接运转Git的新型版本,Git的版更新还是比频繁的,之前我们在成千上万品类遭到呢意识由于某平等本的弱项造成问题,所以从最新版本是解决这些问题太简便的章程

语言 5

尽管如此是选项有警告,但是自己一般都见面这么挑,因为本常要针对Linux环境展开操作,可以以Windows命令行中一直利用这些命令会好便宜。

语言 6

挑选使用 native Windows Secure Channel
library可以与商家条件更好之合龙,便于与企业域中的证书认证方式并工作。

语言 7

这设置必要是保默认选项,因为我们采用的是Windows操作系统,默认使用CRLF换行标识,但是Git默认使用LF换行标识,允许Git在提交文件时自动完成CRLF->LF的转移可以包提交至GitHub/VSTS/TFS的长距离Git库里面的文件可以叫科学的识别。你的同事或应用了Mac/Linux操作系统,这也确保我们得采取Windows和他们进行再好之协作。

切切实实可以参考这首文章:https://www.tuicool.com/articles/IJjQVb

语言 8

行使默认的Windows命令行作为Git的授命窗口,这等同配置和脚的Git
Credential
Manager也生十分要命之涉嫌,如果未这么安排,我们也许无法正常的输入VSTS/TFS
的账户信息。

语言 9

最终一定要是选启用Git Credential
Manger这个选项,我们于操作远程Git服务器时经常要输入用户称及密码,选择这以后咱们得以位置信息用Windows凭据管理器进行仓储,不必每次都输入了。

按照上述配置好安装后,我们不怕得针对Git进行有主导配备了。

1. 装你的名字以及邮件地址:

Git要求于交付时供名字与邮件地址,这简单独消息不开设置时束手无策尽git
commit 动作。

git config user.name "你的名字"
git config user.email "你的邮件地址"

注:如果您采取的是店供的TFS服务器,请以以上信息与店家AD域中之邮件地址统一,因为这些信会趁机你的交付入TFS服务器的Git历史记录,保持这些信息一致有助于其他开发人员通过历史记录了解你的付记录。

2. 针对性公司内部TFS的Git服务器的部署

如若你下TFS作为Git服务器,那么还用另外实施以下3单指令以便Git
Credential Manager 可以正常办事

git config --global credential.helper manager
git config --global credential.modalprompt true
git config --global credential.{你的TFS服务器地址}.authority Basic

注:如果你得了解以上配置到底做了呀,可以参照:FAQ
#1

配置好 Git for Windows
环境后,其他的图形化Git工具与IDE都见面直接动用上述配置,给予你于另付出条件中平等的Git使用体验。

客户端代码实现

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

<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”format-detection” content=”telephone=no”/>
<meta name=”format-detection” content=”email=no”/>
<meta content=”width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=0″
name=”viewport”>
<title>多人聊天室</title>
<link rel="stylesheet" type="text/css" href="./style.css" />

<script src="http://realtime.plhwin.com:3000/socket.io/socket.io.js"></script>
</head>
<body>

请先输入你在聊天室的昵称


<script type="text/javascript" src="./client.js"></script>

</html>

地方的html内容我没有啊好说的,我们根本看中的4独文件要:

1、realtime.plhwin.com:3000/socket.io/socket.io.js
2、style.css
3、json3.min.js
4、client.js

第1单JS是Socket.IO提供的客户端JS文件,在前边安装服务端的手续中,当npm安装了socket.io并增加建筑起WebServer后,这个JS文件就足以健康访问了。

第2个style.css文件没什么好说的,就是体文件而已。

第3独JS只以IE8以下版本的IE浏览器被加载,目的是让这些小版本的IE浏览器为会处理json,这是一个开源之JS,详见:http://bestiejs.github.io/json3/

第4个client.js是总体的客户端的政工逻辑实现代码,它的情如下:

<pre>
(function () {
var d = document,
w = window,
p = parseInt,
dd = d.documentElement,
db = d.body,
dc = d.compatMode == ‘CSS1Compat’,
dx = dc ? dd: db,
ec = encodeURIComponent;

w.CHAT = {
    msgObj:d.getElementById("message"),
    screenheight:w.innerHeight ? w.innerHeight : dx.clientHeight,
    username:null,
    userid:null,
    socket:null,
    //让浏览器滚动条保持在最低部
    scrollToBottom:function(){
        w.scrollTo(0, this.msgObj.clientHeight);
    },
    //退出,本例只是一个简单的刷新
    logout:function(){
        //this.socket.disconnect();
        location.reload();
    },
    //提交聊天消息内容
    submit:function(){
        var content = d.getElementById("content").value;
        if(content != ''){
            var obj = {
                userid: this.userid,
                username: this.username,
                content: content
            };
            this.socket.emit('message', obj);
            d.getElementById("content").value = '';
        }
        return false;
    },
    genUid:function(){
        return new Date().getTime()+""+Math.floor(Math.random()*899+100);
    },
    //更新系统消息,本例中在用户加入、退出的时候调用
    updateSysMsg:function(o, action){
        //当前在线用户列表
        var onlineUsers = o.onlineUsers;
        //当前在线人数
        var onlineCount = o.onlineCount;
        //新加入用户的信息
        var user = o.user;

        //更新在线人数
        var userhtml = '';
        var separator = '';
        for(key in onlineUsers) {
            if(onlineUsers.hasOwnProperty(key)){
                userhtml += separator+onlineUsers[key];
                separator = '、';
            }
        }
        d.getElementById("onlinecount").innerHTML = '当前共有 '+onlineCount+' 人在线,在线列表:'+userhtml;

        //添加系统消息
        var html = '';
        html += '<div class="msg-system">';
        html += user.username;
        html += (action == 'login') ? ' 加入了聊天室' : ' 退出了聊天室';
        html += '</div>';
        var section = d.createElement('section');
        section.className = 'system J-mjrlinkWrap J-cutMsg';
        section.innerHTML = html;
        this.msgObj.appendChild(section);   
        this.scrollToBottom();
    },
    //第一个界面用户提交用户名
    usernameSubmit:function(){
        var username = d.getElementById("username").value;
        if(username != ""){
            d.getElementById("username").value = '';
            d.getElementById("loginbox").style.display = 'none';
            d.getElementById("chatbox").style.display = 'block';
            this.init(username);
        }
        return false;
    },
    init:function(username){
        //客户端根据时间和随机数生成uid,这样使得聊天室用户名称可以重复。实际项目中,如果是需要用户登录,那么直接采用用户的uid来做标识就可以
        this.userid = this.genUid();
        this.username = username;

        d.getElementById("showusername").innerHTML = this.username;
        this.msgObj.style.minHeight = (this.screenheight - db.clientHeight + this.msgObj.clientHeight) + "px";
        this.scrollToBottom();

        //连接websocket后端服务器
        this.socket = io.connect('ws://realtime.plhwin.com:3000');

        //告诉服务器端有用户登录
        this.socket.emit('login', {userid:this.userid, username:this.username});

        //监听新用户登录
        this.socket.on('login', function(o){
            CHAT.updateSysMsg(o, 'login');  
        });

        //监听用户退出
        this.socket.on('logout', function(o){
            CHAT.updateSysMsg(o, 'logout');
        });

        //监听消息发送
        this.socket.on('message', function(obj){
            var isme = (obj.userid == CHAT.userid) ? true : false;
            var contentDiv = '<div>'+obj.content+'</div>';
            var usernameDiv = ''+obj.username+'';

            var section = d.createElement('section');
            if(isme){
                section.className = 'user';
                section.innerHTML = contentDiv + usernameDiv;
            } else {
                section.className = 'service';
                section.innerHTML = usernameDiv + contentDiv;
            }
            CHAT.msgObj.appendChild(section);
            CHAT.scrollToBottom();  
        });

    }
};
//通过“回车”提交用户名
d.getElementById("username").onkeydown = function(e) {
    e = e || event;
    if (e.keyCode === 13) {
        CHAT.usernameSubmit();
    }
};
//通过“回车”提交信息
d.getElementById("content").onkeydown = function(e) {
    e = e || event;
    if (e.keyCode === 13) {
        CHAT.submit();
    }
};

})();
</pre>

迄今所有的编码开发工作周成就了,在浏览器中打开http://demo.plhwin.com/chat/就可以看到职能了,后续我会将演示代码提交到Github上。

本例只是一个略的Demo,留下2个有关项目扩大的琢磨:

1、假设是一个在线客服系统,里面有多之公司利用你的劳务,每个企业自己的用户可以通过一个专属URL地址上该商厦的聊天室,聊天是一对一的,每个商家可以新建多独客服人员,每个客服人员可以跟客户端的大多单用户聊天。

2、又使是一个每当线WebIM系统,实现类似微信,qq的功效,客户端可视好友在线状态,在线列表,添加好友,删除好友,新建群组等,消息的发送除了支持中心的契外,还能够支持表情、图片及文件。

有趣味的同室可以继承深入钻研。

Windows上常用之Git工具

为了能让习惯吃以图形化工具的开发者满意,以下我介绍几暂缓比较好用的家伙,供大家参考。

TortoiseGit

语言 10

顿时是暨豪门耳熟能详的TortoiseSVN一脉相承的一样舒缓图形化Git工具,也就是豪门常常说的“小龟”。应该说,小龟是太靠近于Windows使用习惯的同等悠悠git工具,因为她提供了挺健全的文件管理器集成,允许而一直通过文件管理器完成绝大多数git操作,非常直观,对于不惯使用命令行的开发人员来说挺便利。

装到位后,直接在外文件夹着点击右键,即可初步开展Git操作。

语言 11

免费下载地址,建议还要下载中文语言包:

https://tortoisegit.org/download/

Visual Studio

Visual Studio 内置了Git支持,并提供了对 Visual Studio Team Service 和
Team Foundation Server 的全面并,另外Visual
Studio还是顶好之别比较和冲解决工具,这无异点当后续之操作着大家就是见面怀有体会。

可透过以下链接下载 Visual Studio 社区免费版,现在底Visual Studio
2017本以已经是都模块化安装方式,最小安装仅发生只几百预示左右。与大家对Visual
Studio的风土理解不同,现在之Visual
Studio除了提供微软技术栈的SDK支持还提供了大量开源技术栈的家伙支持,比如:Python,
NodeJS, JavaScript和TypeScript等。

语言 12

另外,除了针对Windows上之软件提供周到之支持,也提供了超平台的开发力量,比如:.Net
Core, Linux C++等。

语言 13

设置好后,我们即可通过“团队资源管理器”连接至VSTS,TFS或者GitHub克隆代码,开始便Git操作。

语言 14

历史视图

语言 15

正如视图

语言 16

免费下载地址:

https://www.visualstudio.com/zh-hans/

Visual Studio Code

Visual Studio Code
是同缓轻量级的代码编辑器,同时持有非常强的调剂能力。这款工具由《设计模式》一书的作者,也是Eclipse之父
Eric Gamma
亲自操刀开发,是您可以找到的快慢极其抢之,功能最好丰富的代码编辑器。

vscode中经插件的办法提供了大量的git工具,包括:git blame, git history,
diff等特别实用强大的家伙协助而解决许多习以为常使用难题。

语言 17

下载地址:

https://code.visualstudio.com/

Git企业级私有服务器环境得到

GitHub对于开源软件之支出大有帮助,但是于商家开发者来说 Visual Studio
Team Service 或者 Team foundation Server
则提供了进一步丰富的合乎吃周边团队的效用。VSTS
是托管在微软云上的号级支平台,内置了要命完美之Git服务器支持。与GitHub不同的凡,VSTS提供的是免费私有的公司级Git仓库,而当GitHub上之堆栈默认都是明白的如针对私仓库收取资费。

VSTS提供5口以下团队的免费账号,不限制类和Git私有囤积库数量与大小,可以由此以下地方注册。

https://www.visualstudio.com/zh-hans/team-services/

登记过程吧很简单,只待3步,对于华开发者来说,2017年10月份上线的香港节点提供了再好的访问速度,大家在登记的上注意选择区域(默认区域也美国)。

先是步:点击 免费试用

语言 18

其次步:使用你的Live账号登陆,如果无得免费注册

语言 19

其三步:输入你协调的账号别名,并注意选择 East Asia (中国香港)节点

语言 20

挂号成功后,我们即可通过 VSTS
示例项目生成器自动创建项目并导入示例代码,同时也会创工作起,看板,迭代计划,测试计划,自动化构建等内容。

第一步:登录https://vstsdemogenerator.azurewebsites.net/
并输入你当上头注册之VSTS账号,如果需要进一步详细的指,请扫描以下二维码

语言 21

其次步:选择示例项目套件,在咱们立马套教程被使用PartsUnlimited示例代码

语言 22

老三步:项目创造成功后即可进入自己之VSTS账号进行操作了,具体操作指导请扫描以下图备受第二维码

语言 23

假设大家对VSTS或者TFS本身的另职能感兴趣,请参考 DevOps
文档中心 的 微软研发云 部分的文档。

Windows命令行替代品Cmder

终极以能当Windows上重复好的下命令执行,你还亟需安装一个叫Cmder的有点器。这是Windows上最好好用底命令行工具,没有有。以下简单列有它们的优势

– 直接动用剪贴板,用Ctrl+V/C完成拷贝粘贴
– 直接用鼠标进行内容选择进行拷贝
– 允许混用Windows和Linux风格的途径
– 多窗口模式
– git分支显示
– 内置常用的linux命令,并同意而以Windows上运用,比如(cp, mv, cat,
rm,ssh等)
– 内置linux上常用的文本编辑器,如:nano和wim
– 直接适配多种屏幕分辨率,可以无限制拖拽到外大小
– 颜色显示

语言 24

行使git不可知幸免免命令行,有同样迟迟好用之命令行工具会于您事半功倍,下载地址如下,这是个绿色软件,直接排压缩即可使用。

http://cmder.net/

小结

交此地,我们已经办好了开头采用Git的普准备,在生一致章节中我们用初步用Git实际进行付出工作。


 

有关文章:

  • 微软研发云全家桶VSTS登陆中国
  • Markdown/reST
    文档披露流水线
  • 几乎款款好用之Git
    GUI客户端工具
  • 使用 SSH 连接 TFS/VSTS
    的GIT仓库
  • GitHub + VSTS
    开源代码双向共

呼吁关注微信公众号 【devopshub】,获取更多关于DevOps研发运维一体化的音信

语言 25

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图