2017 05
当前系统: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
就能看到聊天室效果。
分享到:
相关推荐
express+socket.io+angular聊天室,实现的登陆验证和socket验证,确保你的运行环境中有Mongodb和nodejs,可以直接运行
简单的基于nodeJs+express+socket.io的即时通信web聊天室,实现了在线统计,消息广播 ,图片发送,表情发送等
适合express初学者,即时通讯,通知等
本篇文章主要介绍了vue+socket.io+express+mongodb 实现简易多房间在线群聊示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
用nodejs作为后台,用angularjs作为前端,用socket.io实现一个简单的聊天程序!用node server.js 即可启动服务器,在浏览器中访问127.0.0.1:3000即可进入聊天室 地址和端口都是在server.js文件中配置!需要有nodejs...
SimpleChatRoom 基于node+express+socket.io的简易聊天室
教你用Vue渐进式建造聊天室,从JavaScript => TypeScript 前言 Vue + Socket.io这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现(大家可以在github中的Releases查看): 纯前端(Vuex) 初步...
一款后端基于express与socket.io的简易聊天室,前端是纯html,代码通俗易理解。
使用 Express + socket.io + MongoDB 搭建的轻量化聊天室 开始 git clone https://github.com/Eric-Cool/LiteChat.git cd LiteChat npm install 连接MongoDB 运行 node .\bin\www 功能 登录注册 在线聊天 获取...
用nodejs socket.io 开发简单网页聊天室(支持任何浏览器)
前端html,JavaScript, nodejs,express,socket.io,websoket 聊天室,供学习使用
matlab算法,毕设、课设程序,全部源码均已进行严格测试,可以直接运行! matlab算法,毕设、课设程序,全部源码均已进行严格测试,可以直接运行! matlab算法,毕设、课设程序,全部源码均已进行严格测试,可以直接...
express socket.io聊天室
用Vue.js + socket.io建造的一个智能聊天室 这算是入坑Vue后的第二个练手项目了,是之前四月份就弄完了,一直没法发出来。今天突然想起来,还是发出来一下自己的学习历程。废话不多说,下面看东西。 链接 项目技术栈...
Vue全家桶 Socket.io Express/Koa2打造一个智能聊天室
MERSFRB = Mongoose+Express+Restify+Socket.io+Flux+React+Bootstrap 介绍 一个主要结合7个nodejs包的包,旨在实现从数据库到前端设计的敏捷web应用开发框架,源代码包含一个聊天室示例供参考,尝试看看它的威力。...
真心佩服那些可以经常发布笔记的人,其实我也想经常发来的,奈何技术不够加上懒,要向大神们多多学习了,前段时间有用bomb平台自带的socket写一个聊天室,其实基本就是改了改它的demo,这次想实现一个随机私聊,所以...
socket.io即时聊天室 (用户名:蓝色,密码:huimin) 扫视 登录页面 群聊页面 其他清单 私人聊天页面 安装依赖 节点7.x 自动重启节点服务器工具 npm i -g nodemon 质量检查工具 为代码编辑器安装eslint插件...
简版聊天室NodeJs + Socket.io + Express + MongoDB + AngularJs + AngularMaterial 构建的简版聊天室** CheckOut and Run:**首先 ,确认你的系统安装了,和 。1,clone codegit clone ...
使用 + 在构建的简单聊天室。 有关其构建方式的教程在。