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服务器(8):非阻塞是如何实现的
Dec 18 NodeJs
nodeJS代码实现计算交社保是否合适
Mar 09 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
简单实现nodejs上传功能
Jan 14 NodeJs
Nodejs进阶之服务端字符编解码和乱码处理
Sep 04 NodeJs
nodejs async异步常用函数总结(推荐)
Nov 17 NodeJs
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
May 15 NodeJs
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
Feb 02 NodeJs
nodejs制作小爬虫功能示例
Feb 24 NodeJs
nodejs中内置模块fs,path常见的用法说明
Nov 07 NodeJs
NodeJs内存占用过高的排查实战记录
May 10 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
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
PHP封装请求类实例分析【基于Yii框架】
2019/10/17 PHP
二级域名转向类
2006/11/09 Javascript
ext checkboxgroup 回填数据解决
2009/08/21 Javascript
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
node.js中的console.trace方法使用说明
2014/12/09 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
JS实现的最简Table选项卡效果
2015/10/14 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
2015/11/24 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
vue刷新页面时去闪烁提升用户体验效果的实现方法
2018/12/10 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Python 自动补全(vim)
2014/11/30 Python
Django验证码的生成与使用示例
2017/05/20 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python实现移位加密和解密
2019/03/22 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
三个Unix的命令面试题
2015/04/12 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
秋天的图画教学反思
2014/05/01 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
个人简历求职信范文
2015/03/20 职场文书
导游词之任弼时故居
2020/01/07 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
springboot集成springCloud中gateway时启动报错的解决
2021/07/16 Java/Android