ajax的数据传输是单向的,客户端和服务端没有连接-----客户端建立连接发送请求----服务器端沿着建立的连接返回相应----断开连接

websocket则是可以在客户端和服务器端进行双向的数据接收和发送

打个比方:小明在客厅看电视,小明的媳妇在卫生间洗衣服,小明的爸爸在书房看报纸,小明的妈妈在厨房做饭;小明的爸爸饿了,问小明:饭做好了么?这时小明只能去询问妈妈:饭做好了么,小明的妈妈回复小明说没做好,小明转而回复爸爸:饭没做好。如果按照ajax的习惯现场状态就变成了这样:小明的爸爸没过一秒钟问小明一次饭做没做好,小明只能一遍一遍的询问妈妈饭做没做好,然后不厌其烦的转达给爸爸;在整个一个过程中小明充当了服务器的角色,客户端(小明的爸爸)发出请求,服务器(小明)接收数据然后从数据库中(小明的妈妈)获取信息,再转达给小明的爸爸,才能达到实时展示信息的过程。然而引入websocket后,现场情况转变成了:小明的爸爸问小明:饭做好了没,小明转告妈妈:饭好了告诉爸爸一生,然后小明的妈妈把饭做好了直接告诉小明的爸爸:饭做好;

忽略上面我拙劣的例子,下面接着来看websocket

运行环境:基于node 安装
安装:npm install socket.io
工作流程:
服务器端 接收 connection 接收完了之后进行emit(发送)
客户端 需要connect

服务器端使用 nodejs语句编写:

        var http=require('http');
var fs=require('fs');
var io=require('socket.io');
var httpObj=http.createServer(function(req,res){ });
httpObj.listen();
var ws=io.listen(httpObj);
//服务器端接收数据
ws.on('connection',function(socket){
setInterval(function(){
socket.emit('time',Date.now());
},);
socket.on('khd',function(name,content){
console.log(name,content);
});
});

客户端语句编写:
客户端处理:
var ws=io.connect('ws://localhost:8081');
客户端接收数据:
ws.on('time',function(result){
console.log(result);
});
客户端向服务器端发送数据:
ws.emit('kind','','');
服务器端接收:
soket.on('kind',function(name,content){
console.log(name,content);
});

h5中websocket的更多相关文章

  1. uni-app中websocket的使用 断开重连、心跳机制

    前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...

  2. swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析

    showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...

  3. 关于H5中的Canvas API的探索

    Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...

  4. 从web图片裁剪出发:了解H5中的canvas

    本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...

  5. java中websocket的应用

    在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...

  6. iOS下使状态栏颜色与H5中背景色一致

    iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致.如下图所示: 其实出现这种原因,主要是因为使用16进制颜色, ...

  7. 微信H5中静默登录及非静默登录的正确使用姿势

    在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...

  8. h5中不能用js来直接获取网络码和机器码的。

    h5中不能用js来获取mac的.是可以获取ip的.代码  <script>var fso = new ActiveXObject("Scripting.FileSystemObj ...

  9. Jmeter中Websocket协议支持包的使用

    Jmeter中Websocket协议支持包的使用(转) 参考的来源是国外一篇文章,已经整理成pdf格式(http://yunpan.cn/cFzwiyeQDKdh3 (提取码:9bcf)) 转自:ht ...

随机推荐

  1. OC 多态

    OC 多态 多态的概念 没有继承,就没有多态 不同类的对象能够定义相同名称的方法 当父类对象的指针或引用指向子类对象时,会进行动态监测,调用真实的方法 C++只有虚函数才能实现多态,OC中所有方法都可 ...

  2. cocoapods遇到的问题 (pod: command not found的问题)

    在使用CocoaPod为项目添加第三方类库时,出现了-bash: pod: command not found的问题: 在网上看到了一位哥的方法:确实有效:

  3. 设计模式 之 装饰者(Decorator)模式

    装饰者模式(Decorator):动态地为一个对象添加一些额外的职责,若要扩展一个对象的功能,装饰者提供了比继承更有弹性的替代方案. 结构图: 抽象构件类(Component):给出一个抽象的接口,用 ...

  4. 通过系统架构漏洞获取系统VIP资源

    首先说我的构思: 一本小说,有很多集,每一集请求下载都会生成一个k的json,例如: 有了这个k我们就可以定位到这一集具体的位置,这本小说是固定的id,每一集的K找到了,剩下的不就简单了. 再通过抓包 ...

  5. Linux 僵尸进程查杀

    僵尸进程概念 僵尸进程(Zombie process)通俗来说指那些虽然已经终止的进程,但仍然保留一些信息,等待其父进程为其收尸. 书面形式一点:一个进程结束了,但是他的父进程没有等待(调用wait ...

  6. 如何删除或重置spfile中的参数

    在ORACLE中,修改spfile中的参数一般非常容易,那么如何删除spfile中的参数呢? 下面我们用一个案例来介绍一下,如何删除spfile中的参数,一种方法就是创建对应的pfile,删除对应的参 ...

  7. [20140117]疑似checkpoint堵塞数据库连接

    注:这个说法是不成立的,问题已经解决,但是无法正确的定位到具体什么原因:[20140702]奇怪的应用程序超时 背景: 开发通过应用程序的日志发现间歇性的出现,数据库连接超时 原因: 只能大概猜测,没 ...

  8. XML 在SQLServer中的使用

    SQL Server对于XML支持的核心在于XML数据的格式,这种数据类型可以将XML的数据存储于数据库的对象中,比如variables, columns, and parameters.当你用XML ...

  9. 0011《SQL必知必会》笔记07 数据的插入、更新和删除

    1.插入完整的行或一部分:INSERT INTO 表名(列名1-n) VALUES (对应的值1-n) INSERT INTO products(prod_id, vend_id, prod_name ...

  10. 知方可补不足~sqlserver中对xml类型字段的操作

    回到目录 在sqlserver中有很多种数据类型,而XML数据类型是比较新奇怪的一种格式,我们平常接触的可能比较少,用的也少,而在某些场合,使用XML类型可能会使我们的开发变简单,下面就是一种情况: ...