玩转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 相关文章推荐
网页和浏览器兼容性问题汇总(draft1)
Jun 01 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
js中document.write使用过程中的一点疑问解答
Mar 20 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
微信小程序 MD5的方法详解及实例代码
Mar 10 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
May 03 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
php使用json_encode对变量json编码
2014/04/07 PHP
PHP7匿名类用法分析
2016/09/26 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
js文字横向滚动特效
2015/11/11 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
2016/12/20 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
浅谈vue项目用到的mock数据接口的两种方式
2019/10/09 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
JavaScript实现简单日历效果
2020/09/11 Javascript
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
Vue-router中hash模式与history模式的区别详解
2020/12/15 Vue.js
原生JS实现拖拽功能
2020/12/16 Javascript
python解析文件示例
2014/01/23 Python
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python实现可逆简单的加密算法
2019/03/22 Python
Python获取基金网站网页内容、使用BeautifulSoup库分析html操作示例
2019/06/04 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
matplotlib jupyter notebook 图像可视化 plt show操作
2020/04/24 Python
基于opencv实现简单画板功能
2020/08/02 Python
HTML5 canvas基本绘图之图形组合
2016/06/27 HTML / CSS
新加坡时尚网上购物:Zalora新加坡
2016/07/26 全球购物
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
室内设计专业个人的自我评价
2013/10/19 职场文书
自我鉴定200字
2013/10/28 职场文书
八项规定整改措施
2014/02/12 职场文书
目标责任书范本
2014/04/16 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server
《LOL》“克隆大作战”久违归来 幻灵战队皮肤上线
2022/04/03 其他游戏