具体源码: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. sublime text 调出结果输出框

    sublime是一个非常好用的代码编辑器,同时可以build program 但是在执行代码的过程中,如果进行了查找等操作,下面原来显示输出框的地方被查找界面替代,而程序结果输出框就会"消失 ...

  2. WKWebKit基础

    UIWebView & UIWebViewDelegate 这个两个东西在 WKWebKit 中被重构成 14 个类 3 个协议. WKWebKit Framework Classes WKB ...

  3. TCP/IP协议头部结构体（网摘小结）（转）

    源:TCP/IP协议头部结构体(网摘小结) TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #de ...

  4. 火狐上的一个post提交工具(主要用于测试接口时候)

    添加的过程 安装完后,就可以在下图上,看到一个poster 点击poster就可以看到下图 图中红线圈好的,是必须要填写的 Url是访问路径 Name是参数名称 Value是参数值 需要注意一点的是: ...

  5. 全方位分析Objcetive-C Runtime

    本文详细整理了 Cocoa 的 Runtime 系统的知识,它使得 Objective-C 如虎添翼,具备了灵活的动态特性,使这门古老的语言焕发生机.主要内容如下: 引言 简介 与Runtime交互 ...

  6. jquery弹窗插件

    .zhuti { position:absolute; z-index:; font-size:14px; border-radius:5px; box-shadow: 5px white; over ...

  7. cordova环境搭建

    首先,需要了解一下cordova 和 phonegap 的关系.phoneGap是原先的名字,Cordova是phoneGap被捐给apache之后 用的项目名,phoneGap的名字也被保留了. 1 ...

  8. 命名空间“Microsoft.AspNet”中不存在类型或命名空间名“Mvc”

    问题: 错误 CS0234 命名空间"Microsoft.AspNet"中不存在类型或命名空间名"Mvc"(是否缺少程序集引用?) 解决方案: 打开文件夹 Us ...

  9. 兼容ie6及以上的阴影滤镜的写法

    .subnav{ width: 220px; _width:160px; min-height: 168px; border: 1px solid #d0d8da; background: #fff; ...

  10. redis3 list类型

    list类型及操作list是一个链表结构,主要功能是push,pop.获取一个范围的所有值等,操作中key理解为链表的名字.redis的list类型其实就是一个每个子元素都是string类型的双向链表 ...