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. Ubuntu下使用Git和GitHub

    刚刚学习git和github,网上的知识太杂太乱.照着折腾了很长的时间,都没有搞出个结果,心里十分痒痒,最后终于在github上看到成果.本文适合刚刚接触github但是急于想看到效果的同学,当然gi ...

  2. 【iOS】开发常用命令

    环境信息: Mac OS X 10.10.1 删除指定后缀名的文件 进入指定文件夹,输入: find . -name .svn | xargs rm -Rf 查看全部隐藏文件 defaults wri ...

  3. AutoLayout自动布局

      原文转自http://www.cnblogs.com/xjf125/p/4895978.html 目录: 一.什么是AutoLayout? 二.创建autoLayout的方法 三.VFL语言   ...

  4. 转:SVN常见问题与解决方法

    今天发现一个SVN很奇葩的问题.原来SVN提交的时候也是识别提交路径的大小写的... 发现网上有篇博客总结的挺好的.转载下来,转载出路:http://blog.csdn.net/shinn613/ar ...

  5. Github上十大C#开源项目排行榜

    1.SignalR ASP.NET SignalR 是为 ASP.NET 开发人员提供的一个库,可以简化开发人员将实时 Web 功能添加到应用程序的过程.当WebSockets可用时(即浏览器支持Ht ...

  6. Redis客户端开发包:Jedis学习-高级应用

    事务 Jedis中事务的写法是将redis操作写在事物代码块中,如下所示,multi与exec之间为具体的事务. jedis.watch (key1, key2, ...); Transaction ...

  7. 【SQL篇章】【SQL语句梳理 :--基于MySQL5.6】【已梳理:ALTER TABLE解析】

    ALTER TABLE 解析实例: SQL: 1.增加列 2.增加列,调整列顺序 3.增加索引 4.增加约束 5.增加全文索引FULL-TEXT 6.改变列的默认值 7.改变列名字(类型,顺序) 8. ...

  8. 今天说一下DML触发器的顺序

    因为05之后的版本允许了一个对象有多个after触发器,所以呢~顺序方面还是要留意一下下的.比如我现在要往一个测试表里面添加多个触发器. USE Test GO ,),Name )) GO CREAT ...

  9. 说一下output子句

    Output子句日常灰常有用,而且用的地方也挺多,但是确好多时候被我们忽视,今天我就也简单扫盲一下这个语句的用法. Output子句 返回受 INSERT.UPDATE.DELETE 或 MERGE ...

  10. C#调用自定义表类型参数

    -SQL SERVER生成测试环境: --创建测试DB CREATE database Sales; go USE Sales GO --创建表类型 IF TYPE_ID('LocalDT') IS ...