当前系统:windows7
安装node,没有任何难度,到node官网下载,选高版本的。
下面是安装express
http://www.expressjs.com.cn/starter/generator.html
顺序执行:
npm install express -g
npm install express-generator -g
现在,用express生成器创建项目
express myapp // 这个命令注意只是生成一些目录和文件,但并没有装express的类库
// 而且,屏幕提示会告诉你下面几个命令怎么敲。
注意,用
express --help能看到express的使用帮助,包括指定模板之类的。
$ cd myapp
$ npm install // 这个命令把类库以及依赖类库全部安装了,依据是package.json
然后,
set DEBUG=myapp & npm start // 注意,已屏幕提示为准
这样,服务端已经启动。
客户端:只需
http://localhost:3000/
就能看到应用。
===================================================================
socket。io安装
首先,在package.json文件的 dependencies键下加一项,请注意语法和逗号
"socket.io":"*"
然后,在myapp目录下执行
npm install
这样,就装好了socket.io
这样,就把socket类库加入了express。
此时,启动项目,(set DEBUG=myapp & npm start)
然后,用浏览器
http://localhost:3000/socket.io/socket.io.js
发现神奇之处,
有js文件内容返回了!
现在,修改app.js
自己寻找,在两个合适的地方分别加上
var iotest = require('./routes/iotest');
app.use('/iotest', iotest);
在route下加入iotest.js文件,
内容:
var express = require('express'); var router = express.Router(); var fs= require('fs'); /* GET users listing. */ router.get('/', function(req, res, next) { //res.send("this is ioetst route"); fs.readFile('./public/iotest.html', function (err, data) { if (err) { console.log(err.toString()); }else{ //console.log(data.toString()); res.send(data.toString()); // res.send("哈哈"); } }); // var data= fs.readFileSync('./public/iotest.html','utf-8'); // res.send(data); }); module.exports = router;
在public下加index.html
<script src="http://localhost:3000/socket.io/socket.io.js"></script> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <center> <h2>聊天室</h2> <div id='div1' style='text-align:left; width:500;height:300px;border:1px solid red;overflow:auto'></div> <br> <input id="id1" style='width:300px;height:50px;' type="text" /> <button onclick="send2()">发送消息</button> </center> <script> var socket = io.connect('http://localhost:3000/'); var id = Math.floor(Math.random()*100)+1; $("#div1").html(''); $("#div1").html($("#div1").html() +"<br>"+'开始聊天了!' ); data_arr=[]; socket.emit('newuser', { data: id }); socket.on('g', function (data) { // 这是收到消息的提示。 $("#div1").html( $("#div1").html() +"<br>"+data.toString() ); //console.log(data); //socket.emit('my other event', { my: 'data' }); }); function send2(){ //alert(); var aa = $("#id1").val(); if (aa) { socket.emit('event', { data: $("#id1").val() ,id:id }); $("#id1").val(''); } } </script>
app.js中间一部分
app.use('/', index); app.use('/users', users); app.use('/iotest', iotest); app.xieye = function(io,client){ client.on('newuser', function(data){ console.log('新用户:'+data.data+'上线了'); io.sockets.emit('g','新用户:'+data.data+'上线了'); }); client.on('event', function(data){ console.log( "用户id:" +data.id+ ' 内容:'+data.data); io.sockets.emit('g',"用户id:" +data.id+ ' 内容:'+data.data); }); client.on('disconnect', function(){ io.sockets.emit('g',"用户id:" +data.id+ ' 内容:'+data.data); }); } // catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); });
bin\www 中间的代码
var server = http.createServer(app); var io = require('socket.io')(server); io.on('connection',function(client){ app.xieye(io, client); });
本示例的服务端端口就是3000,无论是html,还是socket
打开网址
localhost:3000/iotest
就能看到聊天室效果。