玩转Node.js(四)-搭建简单的聊天室

玩转Node.js(四)-搭建简单的聊天室

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

初始化项目

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

$ npm init

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

 1 $ cat package.json
 2 {
 3   "name": "chatroom",
 4   "version": "1.0.0",
 5   "description": "a room which lets people chat",
 6   "main": "index.js",
 7   "scripts": {
 8     "test": "nothing"
 9   },
10   "author": "voidy",
11   "license": "ISC",
12  }

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

安装socket.io

  接下来,安装socket.io:

1 $ npm install socket.io --save

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

1 "dependencies": {
2     "socket.io": "^1.2.1"
3 }

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

实现聊天-服务器端

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

1 var http = require(‘http‘);           
2 var socketio = require(‘socket.io‘);  
3 var fs = require(‘fs‘); 

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

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

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

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

 1 var app = http.createServer(function(req, res) {
 2  
 3     fs.readFile(__dirname + ‘/index.html‘, function (err, data) {
 4         if (err) {
 5             res.writeHead(500);
 6             return res.end(‘Error loading index.html‘);
 7         }
 8         res.writeHead(200); 
 9         res.write(data);   
10         res.end();
11     });
12 }).listen(8888); 

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

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

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

1 var io = socketio(app);

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

1 io.on(‘connection‘, function (socket) {
2     // 监听浏览器端的chat事件
3     socket.on(‘chat‘, function (data) {
4         console.log(data);
5         io.emit(‘sendmsg‘, data); 
6     });
7 });

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

1 console.log("Server is running at http://localhost:8888")

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

实现聊天-客户端

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

技术分享
 1 <html>
 2     <head>
 3         <meta charset="utf-8">
 4         <title>Socket.IO chat</title>
 5         <style>
 6             * { margin: 0; padding: 0; box-sizing: border-box; }
 7             body { font: 13px Helvetica, Arial; }
 8             #form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
 9             #form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
10             #form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
11             #messages { list-style-type: none; margin: 0; padding: 0; }
12             #messages li { padding: 5px 10px; }
13             #messages li:nth-child(odd) { background: #eee; }
14         </style>
15         <!-- 引入socket.io库和jQuery库 -->
16         <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>
17         <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
18     </head>
19     <body>
20         <!-- 显示消息记录 -->
21         <ul id="messages"></ul>
22 
23         <!-- 消息发送框 -->
24         <div id="form">
25             <input id="m" autocomplete="off" /><button id="send">Send</button>
26         </div>
27     </body>
28 </html>
View Code

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

技术分享
<script>
// 连接到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($(<li>).text(msg.msg));
    });
});
</script>
View Code

  此时,可以执行:

$ node index.js

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

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

  项目代码在github上:https://github.com/Voidly/chatroom

 

 

PS:本博客欢迎转发,但请注明博客地址及作者,因本人水平有限,若有不对之处,欢迎指出,谢谢~

  博客地址:http://www.cnblogs.com/voidy/

  博客新址:http://voidy.net

  <。)#)))≦

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。