`
toplchx
  • 浏览: 341613 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

HTML5学习笔记(七)-WebSockets API

html5websocket 
阅读更多

一、概述

HTML5 WebSockets是HTML5中最强大的通信功能，它定义了一个全双工通信信道，仅通过Web上的一个Socket即可进行通信。

目前实时Web应用的实现方式，大部分是围绕轮询和其他服务器端推送技术展开的，Comet、轮询、长轮询、流（streaming）解决方案，所有这些提供实时数据的方式包含有大量额外的、不必要的报头数据，会造成传输延迟。最重要的是为了在半双工HTTP的基础上模拟全双工通信，目前的许多解决方案都是使用了两个连接：一个用于下行数据流，另一个用于上行数据流。这两个连接的保持和协作也会造成大量的资源消耗，并增加了复杂度。

WebSockets就是解决以上问题的方案。为了建立WebSocket通信，客户端和服务器在初始握手时，将HTTP协议升级到WebSocket协议。

 

现在WebSocket服务器有很多，还在开发中的更多。有一下几种：

  • Kaazing WebSocket Gateway：一种基于Java的WebSocket网关。
  • mod_pywebsocket：一种基于Python的Apache HTTP服务器扩展。
  • Netty：一种包含WebSocket的Java框架。
  • node.js：一种驱动多个WebSocket服务器的服务器端JavaScript框架。
对于非原生支持WebSocket的浏览器来说，Kazzing的WebSocket网关包含了完整的客户端浏览器WebSocket模拟支持。

二、HTML5 WebSockets API

1、浏览器支持情况检测

function loadDemo() {
    if (window.WebSocket) {
        //supported
    } else {
        // not supported
    }
}

2、WebSocket对象的创建和服务器连接

要连接通信端点，只需要创建一个新的WebSocket实例，并提供希望连接的对端URL。ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

url = "ws://localhost:8080/echo";
w = new WebSocket(url);

 

建立WebSocket连接时，可以列出Web应用能够使用的协议。WebSocket构造函数的第二个参数既可以是字符串，也可以是字符串组。

w = new WebSocket(url, ["proto1", "proto2"]);

假设proto1和proto2是定义明确、可能已注册且标准化的协议名称，它们能够同时为客户端和服务器端所理解。服务器会从列表中选择首选协议。

onopen = function(e) {
    //确定服务器选择的协议
    log(e.target.protocol);
}

 

3、添加事件监听器

WebSocket编程遵循异步编程模型；打开socket后，只需等待事件发生，而不需要主动向服务器轮询，所以需要在WebSocket对象中添加回调函数来监听事件。

WebSocket对象有三个事件：open、close和message。

w.onopen = function() {
    log("open");
    w.send("send message");
}
w.onmessage = function(e) {
    log(e.data);
}
w.onclose = function(e) {
    log("closed");
}
w.onerror = function(e) {
    log("error");
}

 

4、发送消息

当socket处于打开状态（即onopen之后，onclose之前），可以用send方法来发送消息。消息发送完，可以调用close方法来终止连接，也可以不这么做，让其保持打开状态。

w.send();

 

你可能想测算在调用Send()函数之前，有多少数据备份在发送缓冲区中。bufferAmount属性表示已在WebSocket上发送但尚未写入网络的字节数。它对于调节发送速率很有用。

document.getElementById("sendButton").onclick = function() {
    if (w.bufferedAmount < bufferThreshold) {
        w.send(document.getElementById("inputMessage").value);
    }
}

WebSocket API支持以二进制数据的形式发送Blob和ArrayBuffer实例

var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
w.send(a.buffer);

 

三、例子

书中介绍了一个用Python写的Echo服务，书中的代码可以在http://www.apress.com/9781430238645 的“Source Code/Downloads”中下载下载。

对于JAVA开发人员Tomcat是最熟悉的，在Tomcat8中已经实现了WebSocket API 1.0。Tomcat7也会在不久实现（现在的实现不是WebSocket API 1.0）。

在这里写一下在Tomcat8下执行的例子。

例子由客户端页面和WebSocket服务程序组成，功能在Echo基础上增加一个服务端定时发送信息的功能。

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test WebSocket</title>
<script type="text/javascript">
    //显示信息
    var log = function(s) {
    	if (document.readyState !== "complete") {
    		log.buffer.push(s);
    	} else {
    		document.getElementById("output").textContent += (s + "\n");
    		document.getElementById("outputdiv").scrollTop = document.getElementById("outputdiv").scrollHeight;
    	}
    }
    log.buffer = [];
    //显示连接状态
    function setConnected(status) {
    	document.getElementById("socketstatus").innerHTML = status;
    }
    var ws = null;
    
    //连接
    function connect() {
    	if (ws != null) {
    		log("现已连接");
    		return ;
    	}
    	url = "ws://localhost:8080/websocket/mywebsocket";
    	if ('WebSocket' in window) {
            ws = new WebSocket(url);
        } else if ('MozWebSocket' in window) {
            ws = new MozWebSocket(url);
        } else {
            alert("您的浏览器不支持WebSocket。");
            return ;
        }
    	ws.onopen = function() {
            log("open");
            setConnected("已连接");
            //设置发信息送类型为：ArrayBuffer
            ws.binaryType = "arraybuffer";
            
            //发送一个字符串和一个二进制信息
            ws.send("thank you for accepting this WebSocket request");
            var a = new Uint8Array([8, 6, 7, 5, 3, 0, 9]);
            ws.send(a.buffer);
        }
        ws.onmessage = function(e) {
            log(e.data.toString());
        }
        ws.onclose = function(e) {
            log("closed");
        }
        ws.onerror = function(e) {
            log("error");
        }
    }
    
    //断开连接
    function disconnect() {
    	if (ws != null) {
            ws.close();
            ws = null;
            setConnected("已断开");
        }
    }
    
    window.onload = function() {
    	connect();
    	log(log.buffer.join("\n"));
        //发送页面上输入框的信息
    	document.getElementById("sendButton").onclick = function() {
    		if (ws != null) {
    		    ws.send(document.getElementById("inputMessage").value);	
    		}
    	}
        //停止心跳信息
    	document.getElementById("stopButton").onclick = function() {
            if (ws != null) {
            	var a = new Uint8Array([1, 9, 2, 0, 1, 5, 1, 6]);
                ws.send(a.buffer); 
            }
        }
    }
</script>
</head>
<body onunload="disconnect();">
    <div>连接状态：<span id="socketstatus"></span></div>
	<div>
	    <input type="text" id="inputMessage" value="Hello, WebSocket!">
	    <button id="sendButton">发送</button><button id="stopButton" style="margin-left:15px">停止心跳信息</button>
	</div>
	<div>
	    <button id="connect" onclick="connect();">连接</button>
	    <button id="disconnect" onclick="disconnect();">断开</button>
	</div>
    <div style="height:300px; overflow:auto;" id="outputdiv">
        <pre id="output"></pre>
    </div>
</body>
</html>

 

服务端程序用注解方式驱动

 

package com.test.wsocket;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.util.Random;
import java.util.Timer;
import java.util.TimerTask;

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.PongMessage;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/mywebsocket")
public class MyWebSocket {
	
	private Session session;
	private static final Random random = new Random();
	private Timer timer = null;
	//停止信息信息指令
	private static final ByteBuffer stopbuffer  = ByteBuffer.wrap(new byte[]{1, 9, 2, 0, 1, 5, 1, 6});
	
	/**
	 * 打开连接时执行
	 * @param session
	 */
	@OnOpen
	public void start(Session session) {
		this.session = session;
		try {
			System.out.println("open");
			if (session.isOpen()) {
				//设置心跳发送信息。每2秒发送一次信息。
				timer = new Timer(true);
				timer.schedule(task, 1000, 2000);
			}
		} catch (Exception e) {
			try {
				session.close();
			} catch (IOException e1) {}
		}
	}

	/**
	 * 接收信息时执行
	 * @param session
	 * @param msg 字符串信息
	 * @param last
	 */
	@OnMessage
    public void echoTextMessage(Session session, String msg, boolean last) {
        try {
            if (session.isOpen()) {
            	System.out.println("string:" + msg);
                session.getBasicRemote().sendText(msg, last);
            }
        } catch (IOException e) {
            try {
                session.close();
            } catch (IOException e1) {
                // Ignore
            }
        }
    }

	/**
	 * 接收信息时执行
	 * @param session
	 * @param bb 二进制数组
	 * @param last
	 */
    @OnMessage
    public void echoBinaryMessage(Session session, ByteBuffer bb, boolean last) {
        try {
            if (session.isOpen()) {
            	//如果是停止心跳指令，则停止心跳信息
            	if (bb.compareTo(stopbuffer) == 0) {
            		if (timer != null) {
            			timer.cancel();
            		}
            	} else {
            		session.getBasicRemote().sendBinary(bb, last);
            	}
            }
        } catch (IOException e) {
            try {
                session.close();
            } catch (IOException e1) {
                // Ignore
            }
        }
    }
    
    /**
     * 接收pong指令时执行。
     *
     * @param pm    Ignored.
     */
    @OnMessage
    public void echoPongMessage(PongMessage pm) {
        // 无处理
    }
    
    @OnClose
    public void end(Session session) {
    	try {
    		System.out.println("close");
    		if (timer != null) {
    			timer.cancel();
    		}
    	} catch(Exception e) {
    	}
    }
    
    /*
     * 发送心跳信息
     */
    public void sendLong(long param) {
    	try {
    		if (session.isOpen()) {
    			this.session.getBasicRemote().sendText(String.valueOf(param));
    		}
    	} catch (IOException e) {
    		try {
    			this.session.close();
    		} catch (IOException e1) {}
    	}
    }
    
    /**
     * 心跳任务。发送随机数。
     */
    TimerTask task = new TimerTask() {
    	public void run() {   
    		long param = random.nextInt(100);
    		sendLong(param);
    	}   
    };

}

 

 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
  <display-name>websocket</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
  
  <filter>
        <filter-name>Set Character Encoding</filter-name>
        <filter-class>org.apache.catalina.filters.SetCharacterEncodingFilter</filter-class>
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
        <init-param>
            <param-name>ignore</param-name>
            <param-value>true</param-value>
        </init-param>
    </filter>
    
    <filter-mapping>
        <filter-name>Set Character Encoding</filter-name>
        <url-pattern>/*</url-pattern>
    </filter-mapping>
</web-app>

 

将以上程序部署到Tomcat8下，启动服务。



 

  • 大小: 9.4 KB
分享到：
| Tomcat与Apache或Nginx连接和集群配置
评论
1 楼 wahahachuang8 2017-09-27  
GoEasy实时Web推送，支持后台推送和前台推送两种：后台推送可以选择Java SDK、 Restful API支持所有开发语言；前台推送：JS推送。无论选择哪种方式推送代码都十分简单（10分钟可搞定）。由于它支持websocket 和polling两种连接方式所以兼顾大多数主流浏览器，低版本的IE浏览器也是支持的。另外GoEasy针对前台推送采用OTP (one-time-password)方式加密方式，能有效杜绝他人通过在页面上获取 appkey的方式，进行非法操作,十分安全！GoEasy多机房部署，支持全球推送。个人觉得十分值得推荐： goeasy.io
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Essential Guide to HTML5学习笔记

    本篇笔记将深入探讨HTML5的基础知识，帮助初学者快速入门。 一、HTML5概述 HTML5（超文本标记语言第五版）旨在提高互操作性和用户体验，它对浏览器的兼容性进行了优化，减少了对插件的需求，并引入了离线存储、拖放...

    韩顺平 HTML5培训笔记

    韩顺平老师的HTML5培训笔记深入浅出地讲解了这一技术，帮助学习者掌握最新的网页制作技能。 在韩顺平老师的课程中，首先会讲解HTML5的基础结构，包括DOCTYPE声明、语义化元素如、、、、和等，这些元素使得网页内容...

    html5学习资料

    本资料包包含的是《HTML5和RIA网站设计》一书的相关资源，包括源代码和作者个人整理的学习笔记，对于深入理解HTML5具有极大的帮助。 HTML5的核心特性包括： 1. **语义化标签**：HTML5引入了新的标签，如、、、、和...

    html最全笔记.zip

    本笔记将全面深入地探讨HTML5，这是HTML的最新版本，引入了许多新的特性和改进，旨在提高网页开发的效率和用户体验。 1. HTML5的基本结构：HTML5文档通常以`&lt;!DOCTYPE html&gt;`开头，声明文档类型。接着是`&lt;html&gt;`...

    bootstrap响应式网页作业ntion-model-for-network开发笔记

    这可能涉及到与后端服务器的API交互，使用AJAX进行异步请求，或者利用WebSockets实现实时通信。 总的来说，这个作业或项目涵盖了前端开发（Bootstrap和HTML）和深度学习（CNN-Bi-LSTM-Attention Model）两个主要...

    java云笔记

    6. **RESTful API设计**：为了实现跨平台访问，Java云笔记可能通过设计符合REST（Representational State Transfer）原则的API，使其他客户端如移动应用或桌面应用也能无缝接入。 7. **容器化部署**：考虑到云环境...

    个人云笔记

    【个人云笔记】项目资源包含了实现一款云笔记应用所需的核心技术与实践，是学习和提升IT技能的好材料。云笔记是一种基于互联网的笔记工具，它允许用户在任何设备上存储、访问和同步他们的笔记，方便知识管理和信息...

    web_note_middle-level:中级前端笔记

    除了上述特性，HTML5还包括离线存储（Application Cache）、拖放功能（Drag and Drop API）、画布（Canvas）和SVG图形等。这些新特性为前端开发者提供了更多的可能性，让网页更具动态性和互动性。 10. **优化与...

    H5可按经纬坐标定位地球仪特效.zip

    首先，HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它引入了许多新的功能和API，如Canvas画布、Web Storage、Geolocation定位、Web Workers和WebSockets等，这些都极大地增强了网页的交互性和...

    Build-Your-APP-With-Django:使用Django构建您的APP

    在"Build-Your-APP-With-Django-master"这个压缩包中，很可能包含了实现上述概念和功能的代码示例、教程文档或笔记，可以帮助学习者更好地理解和应用Django。建议按照文件结构和说明逐步学习，实践操作，以提高对...

    海康摄像头+web的demo 源码下载

    Web3.0的概念通常指的是互联网的下一代形态，强调更智能、更互联，这里可能意味着此开发包采用了更先进的技术，如WebSockets进行实时通信，或者利用WebGL进行高效的视频处理。 为了更好地理解和使用这个开发包，...

    Notes_App：具有udemy课程注释的Notes应用程序

    "Notes_App"是一个专为Udemy课程设计的注释应用程序，它允许用户在学习过程中记录、管理和检索笔记，从而提升学习体验。本文将深入探讨如何利用JavaScript技术来构建这样的应用。 首先，JavaScript是构建此类Web...

    Django_Notes

    14. **第三方库**：Django拥有丰富的第三方库生态系统，如DRF（Django Rest Framework）用于构建RESTful API，Django Channels支持WebSockets通信等。 15. **开发和部署**：Django自带开发服务器，方便本地开发。...

    jxNotes

    5. **图标和图片**：应用可能包含一些图标资源，用于表示不同的操作或状态，比如保存、删除或编辑笔记的图标。 6. **库和框架**：jxNotes可能会依赖一些流行的JavaScript库和框架，如React或Vue.js来构建用户界面，...

Magicbox
Global site tag (gtag.js) - Google Analytics