h5中websocket
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的更多相关文章
- uni-app中websocket的使用 断开重连、心跳机制
前言 最近关于H5和APP的开发中使用到了webSocket,由于web/app有时候会出现网络不稳定或者服务端主动断开,这时候导致消息推送不了的情况,需要客户端进行重连.查阅资料后发现了一个心跳机制 ...
- swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析
showWebView.dataDetectorTypes = .None //swift禁用webView对H5中数字,链接,日期,地址,电话号码做解析 其UIDataDetectorTypes属性 ...
- 关于H5中的Canvas API的探索
Canvas API 是H5中比较炫酷的一部分内容.可以通过它动态的生成和展示图形.图表.图像以及动画.下面我将学习一下Canvas API. 最后有书籍和源码. 一.概述: 1.基本元素: 在网页上 ...
- 从web图片裁剪出发:了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...
- java中websocket的应用
在上一篇文章中,笔者简要介绍了websocket的应用场景及优点,戳这里 这篇文章主要来介绍一下在java项目中,特别是java web项目中websocket的应用. 场景:我做了一个商城系统,跟大 ...
- iOS下使状态栏颜色与H5中背景色一致
iOS 中有的页面也能会内嵌WebView,然后WebView中用H5做了一个导航,而iOS 中状态栏的颜色很难调整的与H5中导航颜色一致.如下图所示: 其实出现这种原因,主要是因为使用16进制颜色, ...
- 微信H5中静默登录及非静默登录的正确使用姿势
在微信中打开网页且需要调用微信登录接口时,微信官方给我们提供了两种登录调用方式:静默登录和非静默登录:但是官方文档中却没有说明在何种情况下使用静默登录,何种情况下使用非静默登录,所以在这里,我想将之前 ...
- h5中不能用js来直接获取网络码和机器码的。
h5中不能用js来获取mac的.是可以获取ip的.代码 <script>var fso = new ActiveXObject("Scripting.FileSystemObj ...
- Jmeter中Websocket协议支持包的使用
Jmeter中Websocket协议支持包的使用(转) 参考的来源是国外一篇文章,已经整理成pdf格式(http://yunpan.cn/cFzwiyeQDKdh3 (提取码:9bcf)) 转自:ht ...
随机推荐
- yii create url (二)
在Yii中经常要生成URL,不管是为了自动跳转还是仅仅是一个链接.下面对Yii中的URL生成做了一个总结.提示:以下controllerX代表控制器X,actionX代表方法X.在Controller ...
- 高级SQL语句
改变数据 insert record 插入一行 insert into foods (name, type_id) values ('Cinnamon Bobka', 1); 如果在insert语句中 ...
- leetcode 第188题,我的解法,Best Time to Buy and Sell Stock IV
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
- Quartz2D复习(三) --- 涂鸦
和上一篇手势解锁不一样,手势解锁只画了一条路径,从触摸开始-->触摸移动-->触摸结束 ,然后路径完成了,渲染出来就是手势解锁了: 这次涂鸦想做到的效果是可以画很多次线段或弧,每次又可以设 ...
- Java核心:类加载和JVM内存的分配
类的加载: 指的是将class文件的二进制数据读入到运行时数据区(JVM在内存中划分的) 中,并在方法区内创建一个class对象. 类加载器: 负责加载编译后的class文件(字节码文件)到JVM(J ...
- 网络热恋之json解析
现在的app开发很少有用到XML解析的了,主流的则是JSON. // // ViewController.m // CX-JSON解析(三方JSONKit-master) #import " ...
- IOS设计模式-观察者模式
前言:23种软件设计模式中的观察者模式,也是在软件开发中,挺常用的一种设计模式.而在苹果开发中,苹果Cocoa框架已经给我们实现了这个设 计模式,那就是通知和KVO(Key-Value Observi ...
- Moinmoin wiki 中文附件名的解决办法
参考: 让MoinMoin支持上传中文文件名的附件 http://www.linuxsir.org/bbs/thread368571.html 在1.9.7中修改解决. MOINMOINWIKI1 ...
- mac os 错误提示:下载失败 使用已购页面再试一次 解决方法
最近由于买了macbook,开始用mac os系统,发现一个奇怪的现象,在app store里下载应用,老是提示:下载失败 使用已购页面再试一次 原来一直不知道怎么解决这个问题,今天研究了下,发现解决 ...
- Windows下配置Git服务器和客户端 超全
为了配合Redmine使用,特地用Git来做版本控制. Git Candy© 是一个基于ASP.NET MVC的Git分布式版本控制平台,Git Candy的目标是轻松干掉Bonobo,逐渐追赶Git ...