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中的非阻塞方法介绍
Jun 05 NodeJs
nodejs中操作mysql数据库示例
Dec 20 NodeJs
nodejs爬虫抓取数据乱码问题总结
Jul 03 NodeJs
Nodejs中解决cluster模块的多进程如何共享数据问题
Nov 10 NodeJs
nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
Dec 30 NodeJs
nodejs基础知识
Feb 03 NodeJs
nodejs学习笔记之路由
Mar 27 NodeJs
nodejs个人博客开发第七步 后台登陆
Apr 12 NodeJs
nodejs中安装ghost出错的原因及解决方法
Oct 23 NodeJs
NodeJS模块与ES6模块系统语法及注意点详解
Jan 04 NodeJs
nodejs分离html文件里面的js和css的方法
Apr 09 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
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php给每个段落添加空格的方法
2015/03/20 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
Vue中保存用户登录状态实例代码
2017/06/07 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
vue-cli的eslint相关用法
2017/09/29 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
2019/09/06 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
python导入模块交叉引用的方法
2019/01/19 Python
Django使用uwsgi部署时的配置以及django日志文件的处理方法
2019/08/30 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
python正则表达式 匹配反斜杠的操作方法
2020/08/07 Python
python statsmodel的使用
2020/12/21 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
建筑专业毕业生自荐信
2014/05/25 职场文书
家长评语怎么写
2014/12/30 职场文书
自荐信怎么写
2015/03/04 职场文书
面试通知单大全
2015/04/20 职场文书
2015年幼儿园保育员工作总结
2015/04/23 职场文书
2015上半年个人工作总结
2015/07/27 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL