使用Node.js开发一个在线聊天应用——编写后台

现在开始编写这个聊天程序后台:

好,现在我们先从一个简单的服务端程序开始,先简单的生成这个程序的HTML页面
然后我们再开始更有趣的部分:实时通信。
首先我们一个用expressjs创建一个index.js文件:
var express = require("express");
varapp = express();
varport = 3700;
 
app.get("/",function(req, res){
    res.send("It works!");
});
 
app.listen(port);
console.log("Listening on port " + port);
如上,我们就创建了一个应用,并且定义了它的端口
并且创建了一个路径解析“/”,在这个例子里面是使用了get方法,那么所有带有“/”路径的请求都会经过这个get处理
并且返回一个response“It works”

接下来在cmd下运行这个index.js
1
node index.js
那么现在这个后台服务就启动了,

你可以打开http://127.0.0.1:3700/ 并观察到


那么接下来更进一步,不再使用返回这个静态的HTML
,在这里我们使用 jade 模板引擎是一个不错的选择,因为jade和expressjs结合的非常好
那么在文件夹下,我们再创建一个新的文件夹 tpl ,并且把如下的 page.jade 文件放入到里面
html
    head
        title="Real time web chat"
    body
        #content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
        .controls
            input#field(style='width:350px;')
            input#send(type='button', value='send')
jade的标记和语法不是很复杂,但是,我建议大家还是去学习一下“ jade-lang.com”,这样能更好的配合expressjs使用。
那么在刚才的index.js里面加上引入这些jade的配置:

index.js

var express = require("express");
var app = express();
var port = 3700;
app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
    res.render("page");
});

app.listen(port);
console.log("Listening on port " + port);

这部分代码告诉了Express模板文件在哪个位置,并且使用哪个模板引擎,它定义了一个function让所有的的request都会通过这个模板。
当一切都准备好了以后,我们就可以用这个 response的render方法 直接把我们的的jade展示返回给用户

实验一下:


这个输出非常的简单,无非就是一个div标签里面包含一个content标签,用来展示聊天信息
还有一个用户的输入框和一个发送按钮

因为上面这个展示界面只是jade生成的一个静态页面,没有实际的逻辑交互
比如这个send按钮里面没有对应的方法,只是一个样式:

那么我们就需要一个另外的JavaScript文件用来实现客户段的逻辑:就是点击send按钮把内容发送给服务器,并且要接收服务器转发给他的其他用户发送的消息。这个内容我们再后面的章节再说。方正现在用户得到的只是一个静态页面

这一章我们先来实现好服务端的逻辑:就是接收用户发来的信息,并且把这个信息转发给其他在线用户
那么我们就需要写好这个实现后台逻辑的js文件,还需要告诉Expressjs去哪里引入这个js文件,首先我们再创建一个文件夹
public,然后在我们调用.lisen(port)方法前,用如下代码先告诉expressjs这个实现逻辑的js的路径

app.use(express.static( dirname+'/public'));

因为要用到socketio,所以这里先把socket.io加进来
我们把 index.js

app.listen(port);

改写成:

var io = require('socket.io').listen(app.listen(port));

继续往下,现在我们还来实现后台逻辑,实现在服务端从客户端获得信息,然后把它发给其他人。

从监听到一个connection事件开始的,我们代码如下:

io.sockets.on('connection',function (socket) {
    socket.emit('message', { message: 'welcome to the chat' });
    socket.on('send',function (data) {
        io.sockets.emit('message', data);
    });
});
上面代码的这个socket对象

实际上是连接一个客户端的socket,你可以把它想象成连接你的服务器和客户浏览器的一个接口
建立一个成功的连接后,我们先给这个连接者返回一个‘welcome to the chat’的信息,
然后绑定另一个叫做send的handler,作为一个接受者

那么结果就是:客户浏览器会发送一个带有 send 的信息过来,然后就会被我们截获,我们接着再把这个截获的信息
发送给这个sockets上的所有连接者

那么以上的代码我们就把后端部分完成了。接下来来实现客户段的逻辑。

参考链接:http://code.tutsplus.com/tutorials/real-time-chat-with-nodejs-socket-io-and-expressjs--net-31708


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值