少年,进来学习开发socket聊天室吧【上】

先扯淡一下,试想一下,如果有一天公司把私人QQ,微信禁了,这个时候你如何与外界联系??
那么牛逼的我们可以自己搭一个聊天室,以下是聊天室搭建全过程,参照的资料如下:
《node.js权威指南》
http://nqdeng.github.io/7-days-nodejs/ 七天学会node.js
http://www.runoob.com/nodejs/nodejs-tutorial.html node.js菜鸟教程
http://www.open-open.com/lib/view/open1402479198587.html socket.io模块在客户端和服务端的应用
http://cnodejs.org/ node学习的社区
http://www.cnblogs.com/GumpYan/p/5821193.html http 长连接原理
http://blog.csdn.net/csdnhaoren13/article/details/51034565 Socket.io简介

以下展示以win7 64位为例。

Node安装与配置
不喜欢翻墙的下载链接如下,版本肯定不是最新的:
http://nodejs.cn/download/
翻墙的下载链接
https://nodejs.org/en/

安装过程中需要注意,红框中表示将node命令加入到系统环境,注意检查勾选。


Paste_Image.png

安装完毕后,先在cmd中检测是否安装完成,出现版本信息代表安装完成。


Paste_Image.png

之后需要使用npm进行node模块安装,国内速度不行,使用cnpm加速npm,目前cnpm同步时间间隔为15分钟 ,
建议用国内镜像,更换命令如下:
$ npm --registry http://registry.npm.taobao.org info underscore

建立Node第一个应用
先确定当前开发目录为 E:\node_test
下面将用cwd指代 E:\node_test

*** Step1 ***
项目初始化,定义产品信息(版本号,作者,描述等),执行命令如下
$ npm init
这样就在工作目录下生成了package.json

*** Step2 ***
安装常用模块
第一步的package.json显得很有用了,打开它发现
{ "name": "learning_node", "version": "1.0.0", "description": "app", "main": "http.js", "scripts": { "test": "console,log" }, "keywords": [ "app" ], "author": "Wzq", "license": "ISC", "devDependencies": { "argv": "0.0.2", "express": "^4.14.0" }, "dependencies": { "ejs": "^2.5.5" } }
上图包含了项目名,版本,描述,项目入口,关键词,作者等信息

我们在命令行执行
$ npm i http
发现package.json没有变化,但cwd/node_modules中已经多了http模块了
继续执行
$ npm i http -save
发现package.json中加了 dependencies,这个指的是产品模式
继续执行
$ npm i http --save-dev
发现package.json中加了 devDependencies,这个指的是开发模式
在第一个应用创建成功后,该package.json可以用于第二个应用,直接执行npm install会自动搜索并安装package.json中devDependencies的条目

*** Step3 ***
创建服务器

在cwd下创建http.js,写入内容:
var http = require( 'http' );//引入http模块 http.createServer(function (request, response) {//开始监听服务器 // 发送 HTTP 头部 // HTTP 状态值: 200 : OK // 内容类型: text/html var params = url.parse( request.url, true ).query;//取出请求地址的参数部分 console.log(request.url); response.writeHead(200, { 'Content-Type': 'text/html; charset=utf8' }); response.write( "ok" );//返回响应值 response.end();//关闭tcp连接 }).listen( 8888, '127.0.0.1' );//监听本地8888端口

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

在cwd下执行
$ node http

Paste_Image.png

打开浏览器,输入127.0.0.1:8888


Paste_Image.png

如果出现端口被占领的情况,请查询端口使用情况
$ netstat -ano
通过pid找到对应进程,选择性关闭。

---到这里,第一个服务器已经搭建完成---

Socket.io初涉猎

首先先了解一下socket.io是什么。
在html5的websocket出现之前,如果要实现浏览器和服务器的实时通信,大家是这么做的:
1)HTTP 1.1 中 默认 keep-connection: alive,也就是使一次 TCP 连接中完成多个 HTTP 请求,但是对每个请求仍然要单独发 header,简单来说
网页中的多个图片请求依然是发多个http请求,但是共用TCP连接,然后通过不断向服务器请求是否有新的数据来达到实时通信(轮询polling)
参考资料:http://www.cnblogs.com/GumpYan/p/5821193.html
2)Adobe flash socket (这个还未了解)

WebSocket本质上就是一个TCP连接,它解决的第一个问题是,通过第一个 HTTP request 建立了 TCP 连接之后,之后的交换数据都不需要再发 HTTP request了,达到真正意义上的长连接

下图是Websocket在各个终端不同版本的兼容性:

Paste_Image.png

为了方便初学者开发,前人已经帮我们解决好了兼容性的问题,于是伟大的Socket.io诞生
Socket.io解决了三件大事情:
1)封装Websocket协议,强大的api,操作更方便
2)支持多种轮询方式,万一浏览器不支持Websocket,那么有多种方式可以实现实时通信
3)统一了客户端和服务端的api,前后端只需要用一套api,方便开发
参考:http://blog.csdn.net/csdnhaoren13/article/details/51034565

---到这里,socket.io的简介就结束了---

建立第一个简单的Socket应用
在这一节中,为了方便后续功能的扩展,我将用新的方法来创建服务器

首先是温习一下npm install,这一节中需要5个模块
$ npm i fs --save-dev #文件处理模块 $ npm i socket --save-dev #socket.io模块 $ npm i express --save-dev #node.js框架 $ npm i path--save-dev #路径处理模块 $ npm i http --save-dev #http模块

服务端代码,用于监听127.0.0.1:8888的请求
//[模块引入] //接触过grunt的同学会比较熟悉require,返回值是modules.export外爆出来的内容 var fs = require('fs'); var express = require('express'); var http = require('http'); var io = require('socket.io'); var path = require('path'); // [http托管] //http监听8888端口,再交由socket.io管理 server = express(); http = http.Server(server).listen(8888); io = io(http); //[路由设置] server.get('/', function(req, res) { var data = fs.readFileSync('./index.html'); res.writeHead(200, { 'Content-type': "text/html" }); res.write(data); res.end(); }); //[socket.io配置] var names = [];// 全部已登录用户 io.on('connection', function(socket) { names.push(socket.client.id);// 每个登录的用户由socket随机生成id io.sockets.emit('login',names);// 每当有用户登录,guangbo });

客户端代码
<!DOCTYPE html>
<html>
<head> <meta charset="utf-8"> <title>自定义聊天室</title> </head>
<body> <section class="body" id="step2"> <div class="title-bar"> <span>socket聊天室</span> <div class="log-reg"> <div class="log"> <input type="button" id="quit" value="登出" /> 当前用户:<br/> <output id="curUser"></output> <br/> </div> </div> </div> </section> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script src="http://localhost:8888/socket.io/socket.io.js"></script> <script> var socket = io.connect(); socket.on('login', function(names) { var str = ''; names.forEach(function(item, index) { str += item + '<br/>'; }) $("#curUser").html(str); }) </script> </body>
</html>

在多个浏览器打开localhost:8888,效果如下:


Paste_Image.png

---到这里,第一个socket应用讲解已经结束了---

** 下一节将介绍如何实现实时聊天 **


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,332评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,508评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,812评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,607评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,728评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,919评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,071评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,802评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,256评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,389评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,032评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2 350

推荐阅读更多精彩内容