Nodejs+Socket.io实现通讯实例代码


Posted in NodeJs onFebruary 13, 2017

目录结构

D:.
 │ package.json
 │ server.js
 │
 └─public
 index.html
 socket.io.js

需要的条件

  • socket.io.js 供前端界面初始化io
  • socket.io 供NodeJs端提供socket方法

socket.io.js存在于socket.io-client

socket.io存在于socket.io

演示的功能

  • 客户端发送消息给服务端
  • 后端触发事件告知客户端
  • 客户端离开触发服务端事件

服务端

server.js

var express = require('express'); 
var app = express();

var server = require('http').createServer(app);
var io = require('socket.io')(server);

app.use('/', express.static(__dirname + '/public')); 

server.listen(80);

//socket部分
io.on('connection', function(socket) {
  //接收并处理客户端的hi事件
  socket.on('hi', function(data) {
    console.log(data);

    //触发客户端事件c_hi
    socket.emit('c_hi','hello too!')
  })

  //断开事件
  socket.on('disconnect', function(data) {
    console.log('断开',data)
    socket.emit('c_leave','离开');
    //socket.broadcast用于向整个网络广播(除自己之外)
    //socket.broadcast.emit('c_leave','某某人离开了')
  })

});
  • connection用来处理socket链接事件
  • disconnect处理连接断开事件
  • 后端接受前端事件通过socket.on(EventName,function(date){})
  • 后端触发前端事件通过socket.emit(EventName,msg)

这个后端演示了,前端发送消息给后端,触发hi事件,hi事件通过回调在触发客户端定义的c_hi事件告知前端。

客户端

index.html

<!DOCTYPE html>
<html>

<head>
  <title>socket</title>
</head>

<body>


<button id="sendBtn">发送消息</button>

<button id="leaveBtn">离开</button>

</body>
<script type="text/javascript" src="./socket.io.js"></script>
<script type="text/javascript">
  var socket=io.connect('localhost:80'),//与服务器进行连接
    send=document.getElementById('sendBtn'),
    leave=document.getElementById('leaveBtn');

  send.onclick=function(){
    socket.emit('hi', 'hello!');
  }

  leave.onclick=function(){
    window.location.href="about:blank" rel="external nofollow" ;
    window.close()
    socket.emit('leave', 'leave');
  }

  //接收来自服务端的信息事件c_hi
  socket.on('c_hi',function(msg){
    alert(msg)
  })

  // socket.on('c_leave',function(msg){
  //   alert(msg)
  // })

</script>

</html>

Nodejs+Socket.io实现通讯实例代码

  • 发送消息按钮用来给服务端发送信息,触发服务端定义的hi事件。
  • 离开页面按钮用来离开页面,也就是socket会自动断开。触发服务端定义的disconnect。

源码下载:Socket_3water.rar

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

NodeJs 相关文章推荐
NodeJS制作爬虫全过程
Dec 22 NodeJs
NodeJS中利用Promise来封装异步函数
Feb 25 NodeJs
Windows系统中安装nodejs图文教程
Feb 28 NodeJs
nodejs 中模拟实现 emmiter 自定义事件
Feb 22 NodeJs
nodejs和php实现图片访问实时处理
Jan 05 NodeJs
mac下的nodejs环境安装的步骤
May 24 NodeJs
详解Nodejs 通过 fs.createWriteStream 保存文件
Oct 10 NodeJs
nodejs中实现修改用户路由功能
May 24 NodeJs
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
Feb 06 NodeJs
nodeJS与MySQL实现分页数据以及倒序数据
Jun 05 NodeJs
node快速搭建后台的实现步骤
Feb 18 NodeJs
Nodejs高扩展性的模板引擎 functmpl简介
Feb 13 #NodeJs
Nodejs 发送Post请求功能(发短信验证码例子)
Feb 09 #NodeJs
Nodejs实现短信验证码功能
Feb 09 #NodeJs
Express与NodeJs创建服务器的两种方法
Feb 06 #NodeJs
使用nodejs下载风景壁纸
Feb 05 #NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 #NodeJs
nodejs基础应用
Feb 03 #NodeJs
You might like
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
php中memcache 基本操作实例
2015/05/17 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
jQuery EasyUI中对表格进行编辑的实现代码
2010/06/10 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
Vue如何获取数据列表展示
2019/12/11 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
Vue指令实现OutClick的示例
2020/11/16 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
Python 函数返回值的示例代码
2019/03/11 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
python3 批量获取对应端口服务的实例
2019/07/25 Python
使用Keras加载含有自定义层或函数的模型操作
2020/06/10 Python
Python连接mysql方法及常用参数
2020/09/01 Python
python 实现汉诺塔游戏
2020/11/28 Python
波兰在线体育用品商店:Hop-Sport.pl
2019/07/23 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
出生公证书样本
2014/04/04 职场文书
办公楼租房协议书范本
2014/11/25 职场文书
导师对论文的学术评语
2015/01/04 职场文书
简历自我评价优缺点
2015/03/11 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server