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 相关文章推荐
windows系统下简单nodejs安装及环境配置
Jan 08 NodeJs
NodeJS学习笔记之网络编程
Aug 03 NodeJs
nodejs教程之制作一个简单的文章发布系统
Nov 21 NodeJs
nodejs中转换URL字符串与查询字符串详解
Nov 26 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
Dec 18 NodeJs
nodejs中的fiber(纤程)库详解
Mar 24 NodeJs
nodejs开发微博实例
Mar 25 NodeJs
用nodejs的实现原理和搭建服务器(动态)
Aug 10 NodeJs
学习 NodeJS 第八天:Socket 通讯实例
Dec 21 NodeJs
NodeJs中express框架的send()方法简介
Jun 20 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
Dec 05 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
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
function.inc.php超越php
2006/12/09 PHP
说明的比较细的php 正则学习实例
2008/07/30 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
php+mysql数据库实现无限分类的方法
2014/12/12 PHP
javascript 命名规则 变量命名规则
2010/02/25 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
PHP捕捉异常中断的方法
2016/10/24 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
JavaScript中创建原子的方法总结
2018/08/26 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
2020/02/06 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
解决python中 f.write写入中文出错的问题
2018/10/31 Python
Python3中urlencode和urldecode的用法详解
2019/07/23 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python urllib2运行过程原理解析
2020/06/04 Python
在pycharm中文件取消用 pytest模式打开的操作
2020/09/01 Python
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
博士毕业生自我鉴定范文
2014/04/13 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
协议书格式模板
2016/03/24 职场文书
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL