玩转Node.js（四）-搭建简单的聊天室

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

初始化项目

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

$ npm init

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

 $ 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：

 $ npm install socket.io --save

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

 "dependencies": {

     "socket.io": "^1.2.1"

 }

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

实现聊天-服务器端

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

 var http = require('http');

 var socketio = require('socket.io');

 var fs = require('fs');

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

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

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

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

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

 var io = socketio(app);

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

 io.on('connection', function (socket) {

     // 监听浏览器端的chat事件

     socket.on('chat', function (data) {

         console.log(data);

         io.emit('sendmsg', data);

     });

 });

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

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

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

实现聊天-客户端

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

 <html>

     <head>

         <meta charset="utf-8">

         <title>Socket.IO chat</title>

         <style>

             * { margin: 0; padding: 0; box-sizing: border-box; }

             body { font: 13px Helvetica, Arial; }

             #form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }

             #form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }

             #form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }

             #messages { list-style-type: none; margin: 0; padding: 0; }

             #messages li { padding: 5px 10px; }

             #messages li:nth-child(odd) { background: #eee; }

         </style>

         <!-- 引入socket.io库和jQuery库 -->

         <script src="https://cdn.socket.io/socket.io-1.2.1.js"></script>

         <script src="http://code.jquery.com/jquery-1.11.1.js"></script>

     </head>

     <body>

         <!-- 显示消息记录 -->

         <ul id="messages"></ul>

         <!-- 消息发送框 -->

         <div id="form">

             <input id="m" autocomplete="off" /><button id="send">Send</button>

         </div>

     </body>

 </html>

　　然后需要在里面加上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>

　　此时，可以执行：

$ node index.js

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

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

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

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

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

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

　　<。)#)))≦

玩转Node.js（四）-搭建简单的聊天室的更多相关文章

  1. Node.js+websocket+mongodb实现即时聊天室

    ChatRoom Node.js+websocket+mongodb实现即时聊天室 A,nodejs简介:Node.js是一个可以让javascript运行在服务器端的平台,它可以让javascrip ...

  2. 使用Node.js快速搭建简单的静态文件服务器

    做前端有时会采用一些复杂框架,在文件系统中直接打开页面(用file:///方式打开),往往会报跨域的错,类似于“XMLHttpRequest cannot load ...(文件名). Cross o ...

  3. AngularJS+Node.js+socket.io 开发在线聊天室

    所有文章搬运自我的个人主页:sheilasun.me 不得不说,上手AngularJS比我想象得难多了,把官网提供的PhoneCat例子看完,又跑到慕课网把大漠穷秋的AngularJS实战系列看了一遍 ...

  4. Node.js 环境搭建及简单应用

    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型.如果你想创建自己的服务,那么Node.js是一个非 ...

  5. paip.最好的脚本语言node js 环境搭建连接mysql

    paip.最好的脚本语言node js 环境搭建连接mysql #====下载node...走十一个exe..容易的.. 1 #0----Hello world   .js 2 #---------模 ...

  6. 用Node.JS+MongoDB搭建个人博客（页面模板）（五）（结束）

    <差不多先生> 我是差不多先生,我的差不多是天生.也代表我很天真,也代表我是个闲人.这差不多的人生,总是见缝插针. 求学的道路上总是孤独的,即使别人不理解我,认为我是奇葩!但没关系,我会坚 ...

  7. Node.js环境搭建&&npm安装

    Node.js环境搭建 什么使Node.js呢?我们知道JavaScript开始作为客户端语言,但早已在浏览器端一统江湖,这时,野心越来越大,它就想向服务器端拓展了,于是Node.js就是这样的,我们 ...

  8. 玩转Node.js（二）

    玩转Node.js(二) 先来回顾上次的内容,上一次我们使用介绍了Node.js并写了第一个服务器端的Hello World程序,在这个Hello World程序中,请求自带的http模块并将其赋给h ...

  9. 玩转Node.js（一）

    玩转Node.js(一) 在说Node.js之前,我们先来说说js,如果你也曾开发过前端,那么你一定接触到了这个叫JavaScript有趣的东西,而对于JavaScript,你只会基本的操作——为we ...

随机推荐

  1. 2016 ACM/ICPC亚洲区大连站 F - Detachment 【维护前缀积、前缀和、二分搜索优化】

    F - Detachment In a highly developed alien society, the habitats are almost infinite dimensional spa ...

  2. 2018.11.21 struts2获得servletAPI方式及如何获得参数

    访问servletAPI方式 第一种:通过ActionContext (重点及常用 都是获得原生对象) 原理 Action配置 被引入的配置文件 在页面调用取值 第二种:通过ServletAction ...

  3. 【翻译】苹果官网的命名规范之 Code Naming Basics-General Principles

    苹果官方原文链接:General Principles 代码命名基本原则:通用规范   代码含义清晰 尽可能将代码写的简洁并且明白是最好的,不过代码清晰度不应该因为过度的简洁而受到影响.例如: 代码 ...

  4. AngularJS 一 简介以及安装环境

    AngularJS官网:https://angularjs.org AngularJS是开发动态Web应用程序的客户端JavaScript MVC框架.AngularJS最初是作为Google的一个项 ...

  5. Java 加密Excel文件（打开时需输入密码）

    收集:author: lifq package com.XXX.XXX.utils; import java.io.IOException; import com.jxcell.CellExcepti ...

  6. 在Azure上部署Sqlserver网络访问不了的问题

    最近在部署Azure虚拟机的时候,一直访问不了网络数据库,一搜资料才知道,Azure默认是不打开入网规则的,需要手动设置. 在 Windows 防火墙中为数据库引擎的默认实例打开 TCP 端口 在“开 ...

  7. Python基础—05-总结：双重循环，数据类型

    总结 双重循环 冒泡排序 lt = [1, 5, 7, 3, 2, 4] # 计算元素的个数 n = len(lt) # 外层循环控制圈数 for i in range(n-1): for j in ...

  8. iOS9全新的联系人相关框架——Contacts Framework

    iOS9全新的联系人相关框架——Contacts Framework 一.引言 在以前iOS开发中,涉及联系人相关的编程,代码都非常繁琐,并且框架的设计也不是Objective-C风格的,这使开发者用 ...

  9. Struts2知识点小结(四)--拦截器与注解开发

    一.Struts2的拦截器(interceptor) 作用:当请求进入struts2框架后(进入之前可以用filter进行拦截),想对请求进行拦截操作(功能增强.权限控制),需要拦截器组件 1.str ...

  10. django-多表操作2

    #######多表操作二######## 昨天写了基于双下划线查找,都是两个表之间查找,那再多跨几个表呢?还是一样,一步一步分析 # 跨多表查询: 查询红楼梦这本书的作者的电话: (Author,Bo ...