具体源码: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. iOS开发——九切片

    这个虽然就我来说,感觉它没啥用,但还是放这吧,有时间了把内容补上.

  2. Java对象嵌套

    1.基础篇 Java面向对象东西太深奥了,本文只是发表一点自己的见解. 首先 举个栗子!! 汽车, 我们先给汽车定义个轮胎类  有一个属性名 轮胎尺寸 /** *定义一个轮胎类 */ class Wh ...

  3. jsp发布后应用根目录

    1.发布到tomcat后获取应用的根目录 ServletContext s1=this.getServletContext(); String temp=s1.getRealPath("/& ...

  4. js生成随机数

    //生成n以内的随机数 function getRandom(n){ return Math.floor(Math.random()*n+1) } //生成1000以内的随机数 alert(getRa ...

  5. IOS9中联系人对象的使用及增删改查操作的函数封装

    之前克服重重困难把IOS9中新的类联系人搞明白了,现在把增删改查封装成了函数,如下: // // ViewController.m // IOS9中联系人CNContact的使用 // // Crea ...

  6. RabbitMQ消息队列（九）：Publisher的消息确认机制

    在前面的文章中提到了queue和consumer之间的消息确认机制:通过设置ack.那么Publisher能不到知道他post的Message有没有到达queue,甚至更近一步,是否被某个Consum ...

  7. linux下启动tomcat----Cannot find ./catalina.sh

    参考:http://dearseven.blog.163.com/blog/static/1005379222013764440253/ linux 下启动tomcat [root@test233 b ...

  8. [Angular Tutorial] 1-Static Template

    为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示相同结果的模板. 在这一步您将会在一个html页 ...

  9. Grunt构建工具插件篇——之less工具2

    Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成.所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css.另 ...

  10. OC--类型为ID 的类的名称

    NSString *str = [[view class] description];