玩转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 相关文章推荐
jquery mobile动态添加元素之后不能正确渲染解决方法说明
Mar 05 Javascript
ext中store.load跟store.reload的区别示例介绍
Jun 17 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
Nov 02 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
JavaScript 函数的定义-调用、注意事项
Apr 16 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
koa+mongoose实现简单增删改查接口的示例代码
May 13 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 Javascript
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 $_SERVER当前完整url的写法
2009/11/12 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
js实现随机数字字母验证码
2017/06/19 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python里disconnect UDP套接字的方法
2015/04/23 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python适合人工智能的理由和优势
2019/06/28 Python
Python 实现数据结构-循环队列的操作方法
2019/07/17 Python
利用Python的turtle库绘制玫瑰教程
2019/11/23 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
初三学习决心书
2014/03/11 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
卖房授权委托书样本
2014/10/05 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
会议邀请函
2015/01/30 职场文书
2015年度考核个人工作总结
2015/10/24 职场文书
学校体育节班级口号
2015/12/25 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android