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
就能看到聊天室效果。
分享到:
相关推荐
基于nodejs+express+socket.io模块构建的强大网页聊天室+Vue前端+源码+项目文档,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 项目简介: 聊天室是一个基于...
在本文中,我们将深入探讨如何使用Node.js和Socket.IO创建一个简单的聊天室。这是一个非常实用的项目,适合初学者入门,同时也是对这两种技术的绝佳实践。 Node.js是一种基于Chrome V8引擎的JavaScript运行环境,它...
在本项目中,"express4.9+socket.io1.2+angular1.3聊天室" 实现了一个基于Web的实时通信系统,采用的技术栈包括Express、Socket.IO和AngularJS,这些都是JavaScript领域的热门框架,特别适合构建交互性强的Web应用。...
在这个“nodeJs+express+socket.io的即时通信web”项目中,开发者创建了一个简单的聊天室应用,实现了以下几个关键功能: 1. **在线统计**:利用Socket.IO的连接状态管理,可以实时追踪并更新当前在线用户数量。...
这是一个使用JavaScript技术栈,具体是Koa、Node.js和Socket.IO构建的简易聊天室的源码项目。这个项目可以帮助我们深入了解实时通信、WebSockets以及如何在后端和前端之间建立实时连接。以下是对这个项目中涉及的...
本节将基于Node.js和Socket.IO实现一个简易的多人在线聊天室应用,具体需求包括: 1. **兼容性**:考虑到不同浏览器的支持情况,应用需支持WebSocket和其他回退方案。 2. **用户名管理**:允许客户端使用相同的...
在多人聊天室中,socket.io负责实现实时通信,当用户发送消息时,服务器会通过socket.io将消息广播给所有在线用户,实现即时聊天功能。 【多人聊天室实现过程】 1. **服务器端**:首先,需要使用Node.js和Express...
适合express初学者,即时通讯,通知等
【标题】: 使用Node.js + Socket.IO构建HTML5实时在线聊天室 在现代Web开发中,实时通信成为了不可或缺的一部分,特别是在构建社交应用、在线游戏或协作工具时。本项目通过结合Node.js和Socket.IO,利用HTML5技术,...
Vue+Socket.io+Express+MongoDB 实现简易多房间在线群聊示例 本篇文章主要介绍了如何使用 Vue、Socket.io、Express 和 MongoDB 实现一个简易的多房间在线群聊示例。该示例项目使用 Vue 作为前端框架,Socket.io ...
基于Vue+Socket.io+Express/Koa2开发的智能聊天室,包含IP定位、在线群聊,加入了表情管理,接入智能机器人,适合毕业设计、课程设计、项目开发。项目源码已经过严格测试,可以放心参考并在此基础上延申使用~ 项目...
总结来说,这个基于socket.io的聊天室项目是学习实时通信和Node.js开发的一个理想实践。它涵盖了Web应用开发的关键组件,包括Express后端、实时通信的Socket.IO以及简单的HTML前端。通过深入理解并实践这个项目,...
"SimpleChatRoom:基于node+express+socket.io的简易聊天室" 这个标题揭示了我们正在讨论一个使用特定技术栈构建的简单聊天室应用。该应用的核心是利用Node.js作为后端服务器,Express作为Web应用程序框架,以及...
用nodejs作为后台,用angularjs作为前端,用socket.io实现一个简单的聊天程序!用node server.js 即可启动服务器,在浏览器中访问127.0.0.1:3000即可进入聊天室 地址和端口都是在server.js文件中配置!需要有nodejs...
教你用Vue渐进式建造聊天室,从JavaScript => TypeScript 前言 Vue + Socket.io这个轮子已经有很多人造过了,为了不重复造轮子,我将本项目以三阶段实现(大家可以在github中的Releases查看): 纯前端(Vuex) 初步...
"实现Vue + Socket.IO简易聊天室示例代码" 本篇文章主要介绍了使用Vue和Socket.IO实现一个简易聊天室示例代码,具有一定的参考价值,有兴趣的可以了解一下。下面是对标题、描述、标签和部分内容的解释和知识点总结...
在Node.js中,我们可以利用Socket.IO创建一个简单的聊天室,支持一对一私聊和一对多广播。以下是一些关键步骤: 1. **安装依赖**:首先需要通过npm(Node.js包管理器)安装`socket.io`库。在命令行中运行`npm ...
在这个项目中,我们将探讨如何使用Node.js和Socket.IO来构建一个网页版的在线聊天室。Node.js是一个基于Chrome V8引擎的JavaScript运行环境,它让开发者可以使用JavaScript进行服务器端编程。Socket.IO则是一个库,...
在本项目中,我们探索的是一个基于前端HTML、JavaScript、Node.js、Express、Socket.IO以及WebSocket的聊天室应用,这是一套很好的学习资源,旨在帮助开发者掌握这些技术并理解它们如何协同工作。以下是对这些技术...