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

最新推荐文章于 2022-12-22 22:51:36 发布

great_smile

最新推荐文章于 2022-12-22 22:51:36 发布

阅读量1.6k

点赞数

分类专栏： NodeJs

本文链接：https://blog.csdn.net/Great_Smile/article/details/45166779

版权

NodeJs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

好，现在我们先从一个简单的服务端程序开始，先简单的生成这个程序的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对象