返回顶部
首页 > 资讯 > 精选 >好程序员带你认识HTML5中的WebSocket
  • 259
分享到

好程序员带你认识HTML5中的WebSocket

2023-06-03 11:06:22 259人浏览 薄情痞子
摘要

  好程序员带你认识HTML5中的websocket,在html5 规范中,我最喜欢的WEB技术就是正迅速变得流行的 WebSocket api。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的ajax技术。这个新的

  好程序员带你认识HTML5中的websocket,在html5 规范中,我最喜欢的WEB技术就是正迅速变得流行的 WebSocket api。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的ajax技术。这个新的API提供了一个方法,从客户端使用简单的语法有效地推动消息到服务器。让我们看一看 HTML5 的 WebSocket API:它可用于客户端、服务器端。而且有一个优秀的第三方API,名为Socket.io

  一、HTML5 中的 WebSocket API 是个什么东东?

  WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的tcp套接字,使用ws或wss协议,可用于任意的客户端和服务器程序。WebSocket目前由W3C进行标准化。WebSocket已经受到Firefox 4、Chrome 4、Opera 10.70以及Safari 5等浏览器的支持。

  WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信,因为Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以彼此相互推送信息;XHR受到域的限制,而WebSocket允许跨域通信。

  Ajax技术很聪明的一点是没有设计要使用的方式。WebSocket为指定目标创建,用于双向推送消息。

  二、HTML5 中的 WebSocket API 的用法

  只专注于客户端的API,因为每个服务器端语言有自己的API。下面的代码片段是打开一个连接,为连接创建事件监听器,断开连接,消息时间,发送消息返回到服务器,关闭连接。

  代码如下:

  // 创建一个Socket实例

  var socket = new WebSocket('ws://localhost:8080');

  // 打开Socket

  socket.onopen = function(event){

  // 发送一个初始化消息

  socket.send('I am the client and I\'m listening!');

  // 监听消息

  socket.onmessage = function(event){

  console.log('Client received a message',event);

  };

  // 监听Socket的关闭

  socket.onclose = function(event){

  console.log('Client notified socket has closed',event);

  };

  // 关闭Socket....

  //socket.close()

  };

  让我们来看看上面的初始化片段。参数为URL,ws表示WebSocket协议。onopen、onclose和onmessage方法把事件连接到Socket实例上。每个方法都提供了一个事件,以表示Socket的状态。

  onmessage事件提供了一个data属性,它可以包含消息的Body部分。消息的Body部分必须是一个字符串,可以进行序列化/反序列化操作,以便传递更多的数据。

  WebSocket的语法非常简单,使用WebSockets是难以置信的容易……除非客户端不支持WebSocket。IE浏览器目前不支持WebSocket通信。如果你的客户端不支持WebSocket通信,下面有几个后备方案供你使用:

  Flash技术 —— Flash可以提供一个简单的替换。 使用Flash最明显的缺点是并非所有客户端都安装了Flash,而且某些客户端,如iPhone/iPad,不支持Flash。

  AJAX Long-Polling技术 —— 用AJAX的long-polling来模拟WebSocket在业界已经有一段时间了。它是一个可行的技术,但它不能优化发送的信息。也就是说,它是一个解决方案,但不是最佳的技术方案。

  由于目前的IE等浏览器不支持WebSocket,要提供WebSocket的事件处理、返回传输、在服务器端使用一个统一的API,那么该怎么办呢?幸运的是,Guillermo Rauch创建了一个Socket.IO技术。

  三、带Socket.IO的WebSocket

  Socket.IO是Guillermo Rauch创建的WebSocket API,Guillermo Rauch是LearnBoost公司的首席技术官以及LearnBoost实验室的首席科学家。Socket.IO使用检测功能来判断是否建立WebSocket连接,或者是AJAX long-polling连接,或Flash等。可快速创建实时的应用程序。Socket.IO还提供了一个nodejs API,它看起来非常像客户端API。

  建立客户端Socket.IO

  Socket.IO可以从GitHub下载,可以把socket.io.js文件包含到页面中:

  代码如下:
  
  此时,Socket.IO在此页面上是有效的,是时候创建Socket了:

  代码如下:

  // 创建Socket.IO实例,建立连接

  var socket= new io.Socket('localhost',{

  port: 8080

  });

  socket.connect();

  // 添加一个连接监听器

  socket.on('connect',function(){

  console.log('Client has connected to the server!');

  });

  // 添加一个连接监听器

  socket.on('message',function(data){

  console.log('Received a message from the server!',data);

  });

  // 添加一个关闭连接的监听器

  socket.on('disconnect',function(){

  console.log('The client has disconnected!');

  });

  // 通过Socket发送一条消息到服务器

  function sendMessageToServer(message){

  socket.send(message);

  }

  Socket.IO简化了WebSocket API,统一了返回运输的API。传输包括:

  WebSocket

  Flash Socket

  AJAX long-polling

  AJAX multipart streaming

  IFrame

  JSONP polling

  你还可以设置任意的Socket.IO构造器的第二个选项,选项包括:

  port - 待连接的端口

  transports - 一个数组,包含不同的传输类型

  transportOptions - 传输的参数使用的对象,带附加属性

  Socket.IO还提供了由本地WebSocket API提供的普通连接、断开连接、消息事件。Socket还提供了封装每个事件类型的方法。

  四、nodeJS和Socket.IO联合开发

  Socket.IO提供的服务器端解决方案,允许统一的客户端和服务器端的API。使用Node,你可以创建一个典型的Http服务器,然后把服务器的实例传递到Socket.IO。从这里,你创建连接、断开连接、建立消息监听器,跟在客户端一样。

  一个简单的服务器端脚本看起来如下:

  代码如下:

  // 需要HTTP 模块来启动服务器和Socket.IO

  var http= require('http'), io= require('socket.io');

  // 在8080端口启动服务器

  var server= http.createServer(function(req, res){

  // 发送HTML的headers和message

  res.writeHead(200,{'Content-Type': 'text/html' });

  res.end('Hello Socket Lover!');

  });

  server.listen(8080);

  // 创建一个Socket.IO实例,把它传递给服务器

  var socket= io.listen(server);

  // 添加一个连接监听器

  socket.on('connection', function(client){

  // 成功!现在开始监听接收到的消息

  client.on('message',function(event){

  console.log('Received message from client!',event);

  });

  client.on('disconnect',function(){

  clearInterval(interval);

  console.log('Server has disconnected');

  });

  });

  你可以运行服务器部分,假定已安装了NodeJS,从命令行执行:

  node socket-server.js

  现在客户端和服务器都能来回推送消息了!在NodeJS脚本内,可以使用简单的javascript创建一个定期消息发送器:

  代码如下:

  // 创建一个定期(每5秒)发送消息到客户端的发送器

  var interval= setInterval(function(){

  client.send('This is a message from the server! ' + new Date().getTime());

  },5000);

  服务器端将会每5秒推送消息到客户端

  五、dojox.Socket和Socket.IO

  Persevere的创建者Kris Zyp创建了dojox.Socket。dojox.Socket以Dojo库一致的方式封装了WebSocket API,用于在客户端不支持WebSocket时,使用long-polling替代。

  下面是怎样在客户端使用dojox.Socket和在服务器端使用Socket.IO的例子:

  代码如下:

  var args, ws= typeof WebSocket!= 'undefined';

  var socket= dojox.socket(args= {

  url: ws? '/socket.io/websocket' : '/socket.io/xhr-polling',

  headers:{

  'Content-Type':'application/x-www-urlencoded'

  },

  transport: function(args, message){

  args.content = message;// use URL-encoding to send the message instead of a raw body

  dojo.xhrPost(args);

  };

  });

  var sessionId;

  socket.on('message', function(){

  if (!sessionId){

  sessionId= message;

  args.url += '/' + sessionId;

  }else if(message.substr(0, 3)== '~h~'){

  // a heartbeat

  }

  });

  dojox.socket.Reconnect还创建了在套接字失去连接时自动重连。期待包含dojox.Socket的Dojo 1.6版本早日发布。

  六、实际应用和WebSocket资源

  有很多WebSocke的实际应用。WebSocket对于大多数客户机-服务器的异步通信是理想的,在浏览器内聊天是最突出的应用。WebSocket由于其高效率,被大多数公司所使用。

--结束END--

本文标题: 好程序员带你认识HTML5中的WebSocket

本文链接: https://www.lsjlt.com/news/234146.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 好程序员带你认识HTML5中的WebSocket
      好程序员带你认识HTML5中的WebSocket,在HTML5 规范中,我最喜欢的Web技术就是正迅速变得流行的 WebSocket API。WebSocket 提供了一个受欢迎的技术,以替代我们过去几年一直在用的Ajax技术。这个新的...
    99+
    2023-06-03
  • 好程序员带你认识“jQuery”
      好程序员带你认识“jQuery”,jQuery是JavaScript的一个类库,$符号它对于jQuery他们是等价的,$(""li)找到所有的li。下面,跟着好程序员的脚步,去了解一下它的选择器的一些主要功能。  选...
    99+
    2023-06-03
  • 一文带你认识java中的String类
    目录什么是字符串字符串常见的赋值方法直接赋值法字符串的比较相等字符串常量池字符串常量池的实例字符串的不可变字符串的常见操作字符串的比较字符串的查找字符串替换 split(S...
    99+
    2024-04-02
  • 好程序员web前端带你了解JS的作用域链
    好程序员web前端带你了解JS的作用域链,我们都知道js是一个基于对象的语言,系统内置各种对象。 而window作为一个天然存在的全局对象,它承担了所有全局资源的存储。 我们使用的任何全局变量,都是window下的。也就...
    99+
    2023-06-03
  • 带你全面认识Java中的异常处理
    目录Java异常处理异常体系的介绍常见运行时异常常见编译时异常补充:自定义异常总结 Java异常处理 异常体系的介绍 什么事异常处理 异常是程序在“编译&rdq...
    99+
    2022-12-26
    java中异常处理的机制 java中怎么处理异常 JAVA中异常处理的定义
  • 好程序员技术文档HTML5开发中的javascript闭包
      好程序员技术文档HTML5开发中的javascript闭包,事实上,通过使用闭包,我们可以做很多事情。比如模拟面向对象的代码风格;更优雅,更简洁的表达出代码;在某些方面提升代码的执行效率,同时避免对命名空间的污染,最重要的是可以从一个域...
    99+
    2023-06-03
  • 好程序员技术分享html5和JavaScript的区别
    好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网页应用(WebApps...
    99+
    2023-06-03
  • 一文带你认识python源文件中的字符编码
    今天就跟大家聊聊有关一文带你认识python源文件中的字符编码,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。python是什么意思Python是一种跨平台的、具有解释性、编译性、互动...
    99+
    2023-06-06
  • 一文带你认识Java中的Object类和深浅拷贝
    目录前言一.初识Object类1.Object类接收所有子类实例2.Object类部分方法介绍①.Object内的toString方法②.Object内的equals和hashCod...
    99+
    2023-05-17
    java深浅拷贝 java中object类型 java 深拷贝和浅拷贝
  • JavaScript try...catch语句:让你成为一名更好的程序员
    JavaScript try...catch 语句概述: try...catch 语句用于捕捉并处理 JavaScript 代码中可能发生的错误。它包含两个块:try 块和 catch 块。try 块包含需要被执行的代码,而 catch ...
    99+
    2024-02-10
    JavaScript try...catch 错误处理 健壮性 可维护性
  • 一文带你吃透数据库的约束,不做CRUD程序员
    在SQL标准中,一共规定了6种不同的约束,包括非空约束,唯一约束和检查约束等,而在MySQL中是不支持检查约束的,所以这篇文章先对其余5种约束做一个详解和练习。 文章目录 1. 约束的概念 2. 约束的分类 3. 非空约束...
    99+
    2023-08-22
    数据库 mysql java
  • 带你走进 JavaScript RequireJS 的奇妙世界,秒变高效程序员!
    RequireJS 的优势 RequireJS 具有许多优势,包括: 模块化:RequireJS 允许你将你的 JavaScript 代码分成独立的模块,这使得你的代码更容易组织和维护。 依赖关系管理:RequireJS 能够自动管理...
    99+
    2024-02-22
    JavaScript RequireJS 模块化 依赖关系管理 效率
  • 好程序员HTML5培训教程-html和css的使用方法以及样式
    好程序员HTML5培训教程-html和css的使用方法以及样式,很好的基础知识系列,内容都是干货知识点,适合收藏下来!布局步骤 第一步: 清除默认样式 第二步: 划分模块 第三步: 设置模块的大小以及位置 第四步: 划分下一级模块 html...
    99+
    2023-06-05
  • 【JAVA】带你认识java方法|java中的方法&方法中的重载和递归
    作者主页:paper jie的博客 本文作者:大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造,将jav...
    99+
    2023-08-31
    java 开发语言
  • 好程序员技术分享浅谈JavaScript中的闭包
    好程序员技术分享浅谈JavaScript中的闭包,js闭包是指有权访问另一个函数作用域中的变量的函数,个人认为js闭包最大的用处就是防止对全局作用域的污染。 试想如果我们把一些仅仅只用到一两次的变量都声明在全局作用域中,最后肯定是容易出错且...
    99+
    2023-06-03
  • 好程序员Java教程分享Java中经常出现的问题
      好程序员Java教程分享Java中经常出现的问题,Java流行了很多年,相信学习Java的小伙伴有很多很多,今天小编总结了关于Java异常的及几大问题,希望对你有所帮助。   1、检查与未检查   简而言之,检查过的...
    99+
    2023-06-02
  • 一文带你了解小程序中的权限设计
    目录前言1 权限表设计2、创建应用3、页面功能实现4、定义变量5、变量的初始化6、用户注册总结前言 日常我们开发小程序的时候,经常需要考虑权限如何设计,比如在我的页面,管理员可以看到...
    99+
    2024-04-02
  • 好程序员web前端分享web测试之Js中的变量
      好程序员web前端分享web测试之Js中的变量,JavaScript的变量与其他语言的变量有很大区别。JavaScript变量是松散型的(不强制类型)本质,决定了它只是在特定时间用于保存特定值的一个名字而已。由于不存在定义某个变量必须要...
    99+
    2023-06-03
  • 好程序员分享如何看待CSS中BEM的命名方式?
      好程序员分享如何看待CSS中BEM的命名方式BEM的意识就是块(block)、元素(element)、修饰符(modifier),是由yandex团队提出的一种CSS Class命名方法。   任何一个东西的存在都有其存在的道...
    99+
    2023-06-03
  • 好程序员Web前端中的js能运用到哪些方面
      好程序员Web前端中的js能运用到哪些方面,相信每一个想要学习前端的人对于前端中html+css+js都不会陌生,这些可以说是一个前端的标配,而在前端的世界里,没有什么是JavaScript实现不了的,那么js都能运用到哪些方面呢&nb...
    99+
    2023-06-03
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作