具体源码:Socket

目录结构

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

socket.io服务端API文档

socket.io-client客户端的API文档

演示的功能

  • 客户端发送消息给服务端

  • 后端触发事件告知客户端

  • 客户端离开触发服务端事件

服务端

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";

        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>

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

Socket.io+Nodejs通讯实例的更多相关文章

  1. 利用socket.io+nodejs打造简单聊天室

    代码地址如下:http://www.demodashi.com/demo/11579.html 界面展示: 首先展示demo的结果界面,只是简单消息的发送和接收,包括发送文字和发送图片. ws说明: ...

  2. nodejs+socket.io即时聊天实例

    在这之前你应该先安装好 Node.js,安装过程不再讲解 首先在你的电脑上创建一个新目录,姑且命名为 chat,然后在该目录创建两个文件,分别是 app.js 和 index.html. app.js ...

  3. angular + socket.io+nodejs

    一.服务器端: 基本和nodejs工程相同 https://www.cnblogs.com/xuanmanstein/p/10509445.html 安装socket.io npm i --save ...

  4. 使用socket.io打造公共聊天室

    最近的计算机网络课上老师开始讲socket,tcp相关的知识,当时脑袋里就蹦出一个想法,那就是打造一个聊天室.实现方式也挺多的,常见的可以用C++或者Java进行socket编程来构建这么一个聊天室. ...

  5. 基于react+react-router+redux+socket.io+koa开发一个聊天室

    最近练手开发了一个项目,是一个聊天室应用.项目虽不大,但是使用到了react, react-router, redux, socket.io,后端开发使用了koa,算是一个比较综合性的案例,很多概念和 ...

  6. socket.io，远程控制你的幻灯片

    原文:http://www.cnblogs.com/xiezhengcai/p/3964455.html 中秋休息了几天,今天又开始捣鼓socket.io了.今天的任务是通过socket.io控制你的 ...

  7. socket.io，环境搭建 & Hello world

    原文:http://www.cnblogs.com/xiezhengcai/p/3955827.html socket.io 一个与服务器实时通信的工具,它与原生的webSocket相比,具有更可靠. ...

  8. node.js和socket.io纯js实现的即时通讯实例分享

    在这个例子中,其实node.js并没有真正起到服务器的作用,因为我们这里可以直接运行client.html文件,而不用输入url请求,当 然,要想输入url请求页面内容还需要加入请求静态文件的代码.这 ...

  9. NodeJs多进程和socket.io通讯-DEMO

    一.开启多进程 const os = require('os'); const cp = require('child_process'); const forkList = {}; const fo ...

随机推荐

  1. 一、Hbase的安装

    一.Hbase配置 这个是我从网上找的一个版本,网上说配置成功. 先决条件: (1)hadoop的版本与hbase的版本要对应,主要是hadoop目录下的hadoop-core-1.0.4.jar的版 ...

  2. 通过Jenkins跑Jmeter接口测试脚本，我想当有接口跑失败时Jenkins发送邮件通知，这个如何弄呢

    通过Jenkins跑Jmeter接口测试脚本,我想当有接口跑失败时Jenkins发送邮件通知,这个如何弄呢

  3. Linux监控体系

    监控体系 zabbix 博客:www.abcdocker.com 微信公众号:abcdocker 笔者QQ:381493251 Abcdocker交流群:454666672 如果遇到什么问题可以进群询 ...

  4. 以太网数据包、IP包、TCP/UDP 包的结构（转）

    源:以太网数据包.IP包.TCP/UDP 包的结构 版本号(Version):长度4比特.标识目前采用的IP协议的版本号.一般的值为0100(IPv4),0110(IPv6). IP包头长度(Head ...

  5. X-001 FriendlyARM Tiny4412 uboot移植前奏

    版权声明:本文为博主原创文章,转载请注明出处 开发环境:win7 64位 + VMware12 + Ubuntu14.04 64位 工具链:linaro提供的gcc-linaro-6.1.1-2016 ...

  6. bzoj1070 修车&& bzoj2879美食节 【费用流】

    bzoj1070: 把每个工人拆成汽车那么多个点,假如说 工人(i, j) 和 汽车k 连边,那就代表第i个工人倒数第j个修汽车k,那么这条边对以后的贡献就是k*time[i修k]. #include ...

  7. Cocos2d-x 的“HelloWorld” 深入分析

    本节所用Cocos2d-x版本:cocos2d-1.0.1-x-0.12.0 不能免俗,一切都从“HelloWorld!”开始.打开HelloWorld工程,里面有两个文件目录Classes和win3 ...

  8. css3快速复习

    选择器边框.阴影 border-radius: 50%; 设置正圆形背景的改变CSS3重要的新东西: ● transition 过度,让一个元素从一个样式,变为另一个样式,不再是干蹦了,而是有动画,均 ...

  9. IOS开发中使用CNContact\CNMutableContact 对通讯录增删改查

    IOS开发中使用CNContact\CNMutableContact 对通讯录增删改查 首先当然是把CNcontact包含在工程中: @import Contacts; 1.下面是增加联系人的程序段: ...

  10. Yii实现Password Repeat Validate Rule

    在使用Yii时遇到这样的需求:在一个注册的页面输入两次密码,并验证两次输入是否一致.可是password的repeat的字段在数据库 并不存在.问题来了,如何创建一个password_repeat的属 ...