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


Posted in Javascript onNovember 11, 2016

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查看效果。

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

项目源代码:源码下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 对象模型 执行模型
Dec 06 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
Oct 20 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
javascript和HTML5利用canvas构建猜牌游戏实现算法
Jul 17 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
Javascript中数组sort和reverse用法分析
Dec 30 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
jquery判断checkbox是否选中及改变checkbox状态的实现方法
May 26 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
用vue和node写的简易购物车实现
Apr 25 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
JS IOS/iPhone的Safari浏览器不兼容Javascript中的Date()问题如何解决
Nov 11 #Javascript
JSON与XML的区别对比及案例应用
Nov 11 #Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 #Javascript
JS中数组重排序方法
Nov 11 #Javascript
js编写的treeview使用方法
Nov 11 #Javascript
Vue.js教程之计算属性
Nov 11 #Javascript
JS控制TreeView的结点选择
Nov 11 #Javascript
You might like
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
PHP XML和数组互相转换详解
2016/10/26 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
javascript表单验证 - Parsley.js使用和配置
2013/01/25 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
smartcrop.js智能图片裁剪库
2015/10/14 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
jquery操作ID带有变量的节点实例
2016/12/07 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
椰子猫砂:CatSpot
2018/08/27 全球购物
Python如何定义一个函数
2015/09/01 面试题
审计工作个人的自我评价
2013/12/25 职场文书
十岁生日家长答谢词
2014/01/17 职场文书
《狼和小羊》教学反思
2014/04/20 职场文书
运动会口号大全
2014/06/07 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
2015年小学辅导员工作总结
2015/05/27 职场文书
遗愿清单观后感
2015/06/09 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
2016消防宣传标语口号
2015/12/26 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫