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

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

初始化项目

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

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

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

安装socket.io

接下来,安装socket.io:

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

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

实现聊天-服务器端

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

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

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

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

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

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对象。

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

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

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

实现聊天-客户端

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

<Meta charset="utf-8"> Socket.IO chat
    <!-- 消息发送框 -->
    <div id="form"&gt;
      <input id="m" autocomplete="off" /><button id="send"&gt;Send</button>
    </div>

然后需要在里面加上JS来实现与服务器端的通信,将服务器端获取的数据展示到客户端,主要代码如下:

// 连接到Socket.IO服务器 var socket = io.connect();

$(function() {
// 绑定发按钮发送消息的事件
$('#send').on('click',function() {
var data = $('#m').val();
// 创建chat事件并发送消息给服务器
// emit('event') 表示发送了一个event命令
// 使用io.on('event')接收对应事件的信息
// 所以客户端服务器端需要使用socket.on('chat')接收聊天信息
socket.emit('chat',{ msg: data });
$('#m').val('');
});
});

$(function() {
// 接收消息并显示到消息记录框中
socket.on('sendmsg',function(msg) {
$('#messages').append($('

  • ').text(msg.msg));
    });
    });

  • 此时,可以执行:

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

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

    项目源代码

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

    相关文章

    现在的js代码都是这种高级点的方式语法 , 就是ts语法 ,要使用ts语法那就要先安装一下 先安装nodejs最...
    nvm是node版本管理工具 为了解决node各种版本存在不兼容现象 nvm是让你在同一台机器上安装和切换不同版...
    1、安装nodejs 2、在项目文件夹目录下创建一个js文件,命名server.js(自定义名称),内容如下 3、打开命令...
    1.连接路径:path.join([path1][, path2][, ...]) path.join()方法可以连接任意多个路径字符串。要连接...
    简介 1.aes加密简单来说,在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区块加密标准。这个...
    定义 Object.keys 定义:返回一个对象可枚举属性的字符串数组; Object.getOwnPropertyNames 定义:返回...