微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

玩转NODE.JS四-搭建简单的聊天室的代码

Nodejs好久没有跟进了,最近想用它搞一个聊天室,然后便偶遇了socket.io这个小编,说是可以用它来简单的实现实时双向的基于事件的通讯机制。我便看了一些个教程使用它来搭建一个超级简单的聊天室。

初始化项目

在电脑里新建一个文件夹,叫做“chatroom”,然后使用npm进行初始化:

rush:js;"> $ npm init

然后根据提示以及相关信息一步一步输入,当然也可以一路回车下去,之后会在项目里生成一个package.json文件,里面的信息如下:

rush:js;"> $ cat package.json { "name": "chatroom","version": "1.0.0","description": "a room which lets people chat","main": "index.js","scripts": { "test": "nothing" },"author": "voidy","license": "ISC",}

这个文件描述了项目的相关信息。

安装socket.io

接下来,安装socket.io:

rush:js;"> $ npm install socket.io --save

安装Socket.IO的时候,--save参数用于保存模块依赖信息到package.json文件,安装完后,打开package.json文件会看到里面多了一项内容

rush:js;"> "dependencies": { "socket.io": "^1.2.1" }

同时Socket.IO安装在了node_modules文件夹下。

实现聊天-服务器端

首先我们来编写服务器端程序,新建文件“index.js”,在里面导入如下模块:

rush:js;"> var http = require('http'); var socketio = require('socket.io'); var fs = require('fs');

第一行是导入http模块,先前我们已经见过了,用于创建http server。

第二行是导入socket.io模块,实现实时聊天必备的,不再赘述。

第三行是导入fs模块,用于读取文件。具体的一会你就会了解到。

通过http模块创建app,在刚刚的代码中加入如下语句:

rush:js;"> var app = http.createServer(function(req,res) {

fs.readFile(__dirname + '/index.html',function (err,data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.write(data);
res.end();
});
}).listen(8888);

fs.readFile()方法用于读取文件在这里读取的是index.html文件,也就是一会即将要编写的前端聊天室的展示页面

第8行是返回请求的状态码,第9行是返回读取到的内容给浏览器。然后这个http server使用listen方法监听8888端口。

接下来,就是使用socket.io来实现聊天的事件了。在刚刚的index.js文件的http server下面接着创建socket.io对象。

rush:js;"> var io = socketio(app);

然后监听connection事件,当浏览器连接到此Socket.IO服务时触发该事件:

rush:js;"> io.on('connection',function (socket) { // 监听浏览器端的chat事件 socket.on('chat',function (data) { console.log(data); io.emit('sendmsg',data); }); });

第4行用于将信息输入到后台显示器,第5行用于将内容发送给客户端,为了知道服务器是否启动,我在后面又加了如下一句:

rush:js;"> console.log("Server is running at http://localhost:8888")

至此,服务器端编码完成。

实现聊天-客户端

首先实现界面部分,仅仅有显示消息记录以及消息发送框,代码如下:

rush:js;"> <Meta charset="utf-8"> Socket.IO chat

此时,可以执行:

rush:js;"> $ node index.js

然后在浏览器打开localhost:8888查看效果

至此,一个简陋的聊天室就实现了,有兴趣的朋友可以在此基础上进行扩展,实现功能更为复杂的聊天室。

项目源代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐