g4e基础篇#3 Git安装与配置

Windows上常用的Git工具

为了能够让习惯于选取图形化学工业具的开发者满足,以下小编介绍七款比较好用的工具,供大家参考。

TortoiseGit

图片 1

那是和豪门耳熟能详的TortoiseSVN一脉相传的一款图形化Git工具,也正是大家常说的“小乌龟”。应该说,小乌龟是最靠近于Windows使用习惯的一款git工具,因为它提供了要命完美的文件管理器集成,允许你直接通过文件管理器落成绝半数以上git操作,分外直观,对于不习惯使用命令行的开发人士来说尤其便宜。

设置实现后,直接在任何公文夹中式点心击右键,即可初阶展开Git操作。

图片 2

免费下载地址,提议还要下载普通话语言包:

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等。

图片 3

其它,除了对Windows上的软件提供完善的支撑,也提供了跨平台的支付能力,比如:.Net
Core, Linux C++等。

图片 4

安装完毕后,我们即可通过“团队能源管理器”连接到VSTS,TFS只怕GitHub克隆代码,起始经常Git操作。

图片 5

历史视图

图片 6

正如视图

图片 7

免费下载地址:

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

Visual Studio Code

Visual Studio Code
是一款轻量级的代码编辑器,同时全数很强的调试能力。那款工具由《设计形式》一书的撰稿人,也是Eclipse之父
埃里克 Gamma
亲自操刀开发,是你能够找到的快慢最快的,功用最丰硕的代码编辑器。

vscode中经过插件的艺术提供了大气的git工具,包蕴:git blame, git history,
diff等相当实用强大的工具帮忙您消除许多惯常使用难点。

图片 8

下载地址:

https://code.visualstudio.com/

服务端代码完毕

前面讲到的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有了最基本的问询,以往让我们开端起始伊始设置和配备Git环境。

Node.js

Node.js接纳C++语言编写而成,它不是Javascript应用,而是多个Javascript的运作环境,据Node.js创办人RyanDahl纪念,他早期梦想选用Ruby来写Node.js,然而后来意识Ruby虚拟机的特性不能够满意她的供给,后来他尝试运用V8引擎,所以选用了C++语言。

Node.js帮衬的体系包蕴*nux、Windows,那表示程序员能够编写系统级也许服务器端的Javascript代码,交给Node.js来诠释实施。Node.js的Web开发框架Express,能够扶持程序员火速建立web站点,从二〇一〇年出生现今,Node.js的成人的进程鲜明,其发展前景获得了技能社区的充裕肯定。

客户端代码达成

跻身客户端工作目录/workspace/wwwroot/plhwin/demo.plhwin.com/chat,新建3个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内容小编没有啥好说的,我们最首要看看里面包车型地铁多少个公文请求:

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

第一个JS是Socket.IO提供的客户端JS文件,在前方安装服务端的步子中,当npm安装完socket.io并搭建起WebServer后,那么些JS文件就足以平常访问了。

第一个style.css文件没什么好说的,正是样式文件而已。

第三个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上。

本例只是1个粗略的德姆o,留下二个关于项目扩充的思考:

一 、借使是一个在线客服系统,里面有那多少个的店堂使用你的劳动,每种集团温馨的用户能够透过一个附属U哈弗L地址进入该商户的聊天室,聊天是一对一的,各类公司得以新建多个客服人士,每一个客服人士可以同时和客户端的多个用户聊天。

二 、又比方是一个在线WebIM系统,完成类似微信,qq的作用,客户端能够看出好友在线状态,在线列表,添加好友,删除好友,新建群组等,新闻的发送除了援救主题的文字外,还是能够帮忙表情、图片和文书。

有趣味的同班可以一而再深远钻探。


须要分析

壹 、包容不帮衬WebSocket的低版本浏览器。
贰 、允许客户端有平等的用户名。
③ 、进入聊天室后方可看看眼下在线的用户和在线人数。
④ 、用户上线或剥离,全体在线的客户端应该实时更新。
五 、用户发送音信,全部客户端实时接到。

在实际上的付出进度中,为了选取WebSocket接口营造Web应用,大家首先须求创设二个实现了
WebSocket规范的服务端,服务端的贯彻不受平台和开销语言的界定,只必要遵守WebSocket规范即可,近年来曾经冒出了有个别相比较早熟的WebSocket服务端完成,比如本文使用的Node.js+Socket.IO。为啥选用那么些方案吧?先来简单介绍下他们两。

Git工具包罗Git命令行工具,图形化学工业具和服务器环境;在我们那几个科目中,大家会利用以下软件配置大家的条件:

安装Node.js

基于自个儿的操作系统,去Node.js官网下载安装即可。要是成功安装。在命令行输入node -vnpm -v有道是能收占卜应的版本号。

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

小结

到此地,我们早已做好了启幕接纳Git的全部准备,在下一章中大家将启幕应用Git实际开始展览付出工作。


 

相关文章:


请关怀微信公众号 【devopshub】,获取越来越多关于DevOps研究开发运营一体化的消息

图片 9

WebSocket实战

正文将以多人在线聊天应用作为实例场景,我们先来规定那几个聊天应用的基本必要。

Git for Windows 安装

那几个装置过有多少个地点大家只顾修改一下私下认可配置,那样可以让后边的操作经验越来越流畅。

图片 10

上海教室中最后1个要选中,TrueType字体让命令行中的文字更是清楚,每一天检查更新保险你能够间接运维Git的新星版本,Git的本子更新还是相比较频仍的,此前我们在众多项目中也发现由于某一本子的老毛病导致难点,所以跟随最新版本是缓解这个题材最简单易行的艺术

图片 11

虽说那个选项有警告,可是自个儿一般都会如此选择,因为今日平时必要对Linux环境实行操作,能够在Windows命令行中一贯利用这几个命令会很便利。

图片 12

分选选取 native Windows Secure Channel
library可以和店铺环境更好的融会,便于和公司域中的证书认证格局一并干活。

图片 13

其一设置一定要保全暗中同意选项,因为大家应用的是Windows操作系统,暗中认可使用CHavalLF换行标识,然而Git暗中同意使用LF换行标识,允许Git在提交文件时自动完毕CRubiconLF->LF的变换能够保障提交到GitHub/VSTS/TFS的中远距离Git库里面包车型大巴公文能够被科学的辨别。你的同事恐怕应用了Mac/Linux操作系统,那也准保大家可以利用Windows和她俩实行更好的通力合营。

具体能够参照这篇小说:https://www.tuicool.com/articles/IJjQVb

图片 14

选用暗许的Windows命令行作为Git的吩咐窗口,这一计划和上面包车型大巴Git
Credential
Manager也有极大的关联,假设不这么安顿,大家兴许不可能符合规律的输入VSTS/TFS
的账户音信。

图片 15

末段必将要选拔启用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使用体验。

WebSocket简介

谈到Web实时推送,就不得不说WebSocket。在WebSocket出现在此以前,很多网站为了兑现实时推送技术,平日采纳的方案是轮询(Polling)和Comet技术,Comet又可分割为三种完结方式,一种是长轮询机制,一种叫做流技术,那二种办法实际上是对轮询技术的改正,那个方案带来很显明的欠缺,供给由浏览器对服务器发出HTTP
request,多量消耗服务器带宽和能源。面对那种景况,HTML5概念了WebSocket协议,能更好的节约服务器财富和带宽并促成真正含义上的实时推送。

WebSocket协和式飞机本质上是三个依照TCP的情商,它由通信协议和编制程序API组成,WebSocket能够在浏览器和服务器之间建立双向连接,以基于事件的艺术,赋予浏览器实时通讯能力。既然是双向通讯,就表示服务器端和客户端能够同时发送并响应请求,而不再像HTTP的央求和响应。

为了建立贰个WebSocket连接,客户端浏览器首先要向服务器发起3个HTTP请求,那一个请求和平时的HTTP请求例外,包涵了一些附加头音信,个中附加头新闻”Upgrade:
WebSocket”申明那是一个提请协议升级的HTTP请求,服务器端解析那么些附加的头音讯然后发生应答消息重回给客户端,客户端和劳务器端的WebSocket连接就创设起来了,双方就足以由此那几个两次三番通道自由的传递消息,并且那个三番五次会不停存在直到客户端也许服务器端的某一方主动的闭馆连接。

三个头名WebSocket客户端请求头:

图片 16

前边讲到WebSocket是HTML5中新增的一种通讯协议,那表示部分老版本浏览器(首要是IE10以下版本)并不富有那个作用,
透过百度总结的公然数据彰显,IE8方今仍以33%的市镇份额占据头名,幸亏chrome浏览器市镇份额逐年升高,将来以跨越26%的市集份额位居第①,同时微软近期发表终止对IE6的技术帮忙并提醒用户更新到新本子浏览器,那么些曾经让许多前端工程师为之发烧的浏览器有望退出历史舞台,再增加差不离拥有的智能手提式有线电话机浏览器都援救HTML5,所以使得WebSocket的实战意义大增,可是无论怎么样,我们实际的品种中,依旧要考虑低版本浏览器的匹配方案:在帮助WebSocket的浏览器中运用新技巧,而在不支持WebSocket的浏览器里启用Comet来接收发送音信。

章节目录

Web领域的实时推送技术,也被称作Realtime技术。那种技术要达到的目标是让用户不必要刷新浏览器就可以获得实时更新。它具备广阔的选拔场景,比如在线聊天室、在线客服系统、评论系统、WebIM等。

g4e 是 Git for Enterprise
Developer的简写,那几个种类作品会联合运用g4e作为标识,便于大家查看和查找。

编码达成

先上演示效果图:

图片 17

可以点击那里翻开在线演示。整个开发进程非凡不难,上面不难记录了支付步骤:

前言

Socket.IO

Socket.IO是3个开源的WebSocket库,它经过Node.js实现WebSocket服务端,同时也提供客户端JS库。Socket.IO辅助以事件为根基的实时双向通信,它能够干活在此外平台、浏览器或挪动设备。

Socket.IO补助4种协议:WebSocket、htmlfile、xhr-polling、jsonp-polling,它会自行遵照浏览器选择符合的广播发表方式,从而让开发者能够聚焦到功用的达成而不是平台的兼容性,同时Socket.IO具有无可争论的安定团结和品质。

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

搭建WebSocket服务端

其一环节大家尽量的考虑实际生产环境,把WebSocket后端服务搭建成1个线上得以用域名访问的劳动,假若您是在本地开发环境,能够换资金地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的后端服务就像是常搭建了。

图片 18

1. 基础篇:

 

Git集团级私有服务器环境得到

GitHub对于开源软件的付出格外有赞助,但是对于公司开发者来说 Visual Studio
Team Service 恐怕 Team foundation Server
则提供了越来越丰裕的符合于广大团队的意义。VSTS
是托管在微软云上的店堂级开发平台,内置了那几个完美的Git服务器帮衬。与GitHub差别的是,VSTS提供的是免费私有的信用社级Git仓库,而在GitHub上的仓库暗许都是公开的而对私家仓库收取开支。

VSTS提供7位以下团队的免费账号,不限量项目和Git私有囤积库数量以及大小,能够经过以下地点注册。

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

注册进度也很简短,只须要3步,对于中中原人民共和国开发者来说,前年十月份上线的香岛节点提供了更好的访问速度,我们在注册的时候注意选拔区域(暗中认可区域为U.S.A.)。

率先步:点击 免费试用

图片 19

其次步:使用你的Live账号登陆,若是没有得防止费注册

图片 20

其三步:输入你自个儿的账号小名,并小心接纳 East Asia (中中原人民共和国Hong Kong)节点

图片 21

登记成功后,我们即可通过 VSTS
示例项素不相识成器自动创造项目并导入示例代码,同时也会创制工作项,看板,迭代陈设,测试陈设,自动化创设等内容。

第一步:登录https://vstsdemogenerator.azurewebsites.net/
并输入你在上面注册的VSTS账号,假如需求更为详细的指点,请扫描以下二维码

图片 22

第叁步:采取示例项目套件,在大家那套教程中运用PartsUnlimited示例代码

图片 23

其三步:项目创设成功后即可进入本人的VSTS账号实行操作了,具体操作指点请扫描以下图中二维码

图片 24

要是我们对VSTS可能TFS本身的其余功能感兴趣,请参考 DevOps
文书档案中央
 的 微软研究开发云 部分的文书档案。

Windows命令行替代品Cmder

说到底为了能够在Windows上更好的应用命令行,你还须要设置一个叫作Cmder的小工具。那是Windows上最好用的命令行工具,没有之一。以下简单列出它的优势

– 直接采取剪贴板,用Ctrl+V/C实现拷贝粘贴
– 直接动用鼠标实行内容选拔进行拷贝
– 允许混用Windows和Linux风格的路径
– 多窗口格局
– git分支显示
– 内置常用的linux命令,并同意你在Windows上应用,比如(cp, mv, cat,
rm,ssh等)
– 内置linux上常用的文件编辑器,如:nano和wim
– 直接适配五种显示屏分辨率,能够随便拖拽到别的大小
– 颜色显示

图片 25

应用git无法幸免命令行,有一款好用的命令行工具会让你一石二鸟,下载地址如下,那是个丁香紫软件,直接解压缩即可使用。

http://cmder.net/