玩转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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
页面刷新时记住滚动条的位置jquery代码
Jun 17 Javascript
jquery库文件略庞大用纯js替换jquery的方法
Aug 12 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 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 数组教程 定义数组
2009/10/23 PHP
php安全配置记录和常见错误梳理(总结)
2017/03/28 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
基于javascript实现仿百度输入框自动匹配功能
2016/01/03 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
全面理解闭包机制
2016/07/11 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
JavaScript设计模式--桥梁模式引入操作实例分析
2020/05/23 Javascript
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
给Python IDLE加上自动补全和历史功能
2014/11/30 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
基于Python的PIL库学习详解
2019/05/10 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
解决python 找不到module的问题
2020/02/12 Python
python输出pdf文档的实例
2020/02/13 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
Jmeter HTTPS接口测试证书导入过程图解
2020/07/22 Python
Python基础进阶之海量表情包多线程爬虫功能的实现
2020/12/17 Python
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
《蓝色的树叶》教学反思
2014/02/24 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
银行贷款承诺书
2014/03/29 职场文书
应届生求职信范文
2014/05/26 职场文书
社保委托书怎么写
2014/08/02 职场文书
学习作风建设心得体会
2014/10/22 职场文书
幼儿园食品安全责任书
2015/05/08 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python