nodejs结合socket.io实现websocket通信功能的方法


Posted in NodeJs onJanuary 12, 2018

本文实例讲述了nodejs结合socket.io实现websocket通信功能的方法。分享给大家供大家参考,具体如下:

因为项目中有需要实时获取后台数据的场景,之前一直是使用http心跳请求的方法。因为websocket与此模式相比有很大的性能提升,而且可以提高实时性,所以对websocket作了一些研究。这里是使用nodejs+socket.io来实现的。

达成目标

将原来心跳请求后台数据的方式,修改为通过socket连接后台统一推送的方式。后台的数据由别的进程写入文件或写入redis,这里实现的是读取文件的方式。

前期准备

安装nodejs(略)

服务器端

新建一个项目目录,这里是sockettest
进入sockettest目录,安装express模块和socketio模块

npm install --save express@4.10.2
npm install --save socket.io

新建package.json文件,在其中写入如下内容:

{
 "name": "socket-test",
 "version": "0.0.1",
 "description": "my first socket.io app",
 "dependencies": {
  "express": "^4.10.2",
  "socket.io": "^1.7.2"
 }
}

新建index.html,用于作为默认的访问显示页面,因为这里不会用到它,内容随意;
新建trends.js文件,在其中写入内容:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var fs = require('fs');
#默认打开文件
app.get('/', function(req, res){
  res.sendfile('index.html');
});
#用于存储所有socket以广播数据
var iolist = [];
#定义socket on connection(连入)事件行为
io.on('connection', function(socket){
  #将连入socket加入列表
  iolist.push(socket); 
  #记录index,在disconnect(断开连接)发生时将对应的socket删除
  var sockex = iolist.indexOf(socket); 
  #定义on disconnect事件行为
  socket.on('disconnect', function(){
    #将断开连接的socket从广播列表里删除
    iolist.splice(sockex, 1);
  });
});
# 数据广播进程:每1秒钟广播一次
setInterval(function() {
  # 如果没有正在连接的socket,直接返回;
  if (iolist.length <= 0) return;
  var trends = fs.readFileSync('./data/trends.json','utf-8');#trends数据
  var coins = fs.readFileSync('./data/coins.json','utf-8');#coins数据
  #向所有socket连接发送数据
  for (i in iolist) {
    # 向客户端发送trends数据
    iolist[i].emit('trends', trends);
    # 向客户端发送coins数据
    iolist[i].emit('coins', coins);
  }
}, 1000);
# 服务器侦听在sockettest.com的3000端口上
http.listen(3000, function(){
  # 输出到标准输出
  console.log('listening on sockettest.com:3000');
});

新建data目录,并在下面新建两个文件trends与coins,用于存放socket服务器将要读取的数据。
新建public目录,在其中新建一个文件index.html,文件内容如下:

<!--引入必要的js文件-->
<script type="text/javascript" src="http://sockettest:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">
    //新建socket
    var socket = io('http://sockettest.com:3000');
    socketdata(socket);
    function socketdata() {
      #定义接收到coins类型数据时的行为
      socket.on('coins', function(msg){
        console.log(msg);
      }
      #定义接收到trends类型数据时的行为
      socket.on('trends', function(msg){
        console.log(msg);
      }
    }
</script>

代码部署

刚才之所以要建两个index.html文件,是为了能够方便地在既有的web项目中使用nodejs提供的socket服务。这样我们把public/index.html可以部署在别的服务器中,比如nginx或tomcat之类,然后在根目下启动socket的服务器,为其提供socket服务。
首先在刚才的项目根目录下执行

node ./trends.js

并保持终端运行,然后再把项目部署在nginx里,通过chrome下访问nginx提供的web服务:

http://hostname/public/index.html

打开开发者模式,就能在console里看到每隔一秒便会收到来自node服务器的socket推送消息了。通过修改data目录下的两个文件,可以看到写入到文件的数据也会实时地推送到客户端这里来。

参考文章

http://socket.io/get-started/chat/

希望本文所述对大家nodejs程序设计有所帮助。

NodeJs 相关文章推荐
Nodejs异步回调的优雅处理方法
Sep 25 NodeJs
Highcharts+NodeJS搭建数据可视化平台示例
Jan 01 NodeJs
解决nodejs中使用http请求返回值为html时乱码的问题
Feb 18 NodeJs
nodejs中全局变量的实例解析
Mar 07 NodeJs
使用nodeJs来安装less及编译less文件为css文件的方法
Nov 20 NodeJs
NodeJs form-data格式传输文件的方法
Dec 13 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
Jan 12 NodeJs
nodejs中Express与Koa2对比分析
Feb 06 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 NodeJs
详解NodeJs开发微信公众号
May 25 NodeJs
nodejs 使用 js 模块的方法实例详解
Dec 04 NodeJs
Nodejs 识别图片类型的方法
Aug 15 NodeJs
nodejs结合Socket.IO实现的即时通讯功能详解
Jan 12 #NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
Jan 12 #NodeJs
nodejs使用http模块发送get与post请求的方法示例
Jan 08 #NodeJs
nodejs基于mssql模块连接sqlserver数据库的简单封装操作示例
Jan 05 #NodeJs
Nodejs连接mysql并实现增、删、改、查操作的方法详解
Jan 04 #NodeJs
nodejs简单实现TCP服务器端和客户端的聊天功能示例
Jan 04 #NodeJs
详解NODEJS的http实现
Jan 04 #NodeJs
You might like
joomla组件开发入门教程
2016/05/04 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP面向对象类型约束用法分析
2019/06/12 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
javascript demo 基本技巧
2009/12/18 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
2016/04/21 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
JS中如何实现点击a标签返回页面顶部的问题
2017/01/19 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
react router4+redux实现路由权限控制的方法
2018/05/03 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
详解appium+python 启动一个app步骤
2017/12/20 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
在Python中使用turtle绘制多个同心圆示例
2019/11/23 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
什么是聚集索引和非聚集索引
2012/01/17 面试题
春节请假条
2014/04/11 职场文书
2014年终工作总结范本
2014/12/15 职场文书
春节晚会开场白
2015/05/29 职场文书
装修安全责任协议书
2016/03/22 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android