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为指定目标创建,用于双向推送消息。
WebSocket简单用法:客户端页面代码 html5
<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
</head>
<body>
<div id="messages"></div>
<script type="text/javascript">
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080/webSocket/websocket');
// 打开Socket
socket.onopen = function(event) {
// 发送一个初始化消息
socket.send('I am the client and I\'m listening!');
// 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed', event);
};
// 监听消息
socket.onmessage = function(event) {
document.getElementById('messages').innerHTML += '<br />'
+ event.data;
};
// 关闭Socket....
//socket.close()
};
</script>
</body>
</html>
server端:需要jdk7.0.40以上 tomcat7以上
/**
* 访问 http://localhost:8080/webSocket/websocket.html
* @author lijian E-mail:ljz0721cx@163.com
* @version 创建时间:2015年4月27日 下午5:26:16
* @description
*/
@ServerEndpoint(value = "/websocket")
public class WebSocketTest {
/**
* 用于接收传入的WebSocket信息 @OnMessage
* Session表明两个WebSocket端点对话 连接的另一端
* @param message
* @param session
* @throws IOException
* @throws InterruptedException
*/
@OnMessage
public void onMessage(String message, Session session) throws IOException,
InterruptedException {
// 打印客户端收到的消息
System.out.println("服务端收到的消息: " + message);
//发送第一条消息
session.getBasicRemote().sendText("我的第一条服务器消息");
//每5秒发送一次
int sentMessages = 0;
while (sentMessages < 3) {
Thread.sleep(5000);
session.getBasicRemote().sendText(
"我的服务器消息. 数: "
+ sentMessages);
sentMessages++;
}
// Send a final message to the client
session.getBasicRemote().sendText("我的最后一条服务器消息");
}
@OnOpen
public void onOpen() {
System.out.println("连接到客户端");
}
@OnClose
public void onClose() {
System.out.println("连接关闭");
}
}
让我们来看看上面的初始化片段。参数为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实例,建立连接
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还提供了封装每个事件类型的方法
实际应用和WebSocket资源
有很多WebSocke的实际应用。WebSocket对于大多数客户机-服务器的异步通信是理想的,在浏览器内聊天是最突出的应用。WebSocket由于其高效率,被大多数公司所使用。
WebSocket资源
Socket.IO站点:http://socket.io/
WebSocket的Wikipedia:http://en.wikipedia.org/wiki/WebSockets
WebSockets.org站点:http://www.websockets.org/
Dojo WebSocket站点:http://www.sitepen.com/blog/2010/10/31/dojo-websocket/
分享到:
相关推荐
在WebSocket的应用开发中,以下是一些关键知识点: 1. **WebSocket握手**:客户端通过发送一个`Upgrade`请求到服务器来建立WebSocket连接,这个请求包含了`Upgrade`头(值为`websocket`)、`Connection`头(值为`...
实现WebSocket向指定用户发送信息的关键在于管理和识别用户。这通常涉及以下几个步骤: 1. **用户标识**:首先,每个连接到WebSocket服务器的用户都需要一个唯一的标识符。这个标识符可以在用户登录时分配,例如...
这个请求包含了"Upgrade"头字段和"Sec-WebSocket-Key"等关键信息。服务器响应一个101状态码,表明同意升级,并在响应中携带"Sec-WebSocket-Accept"头,以验证客户端的握手信息。 在VS2008中开发MFC WebSocket客户端...
这个项目提供了一个实际的应用场景,展示了WebSocket如何在Web应用和桌面应用之间搭建桥梁,实现双向、实时的信息交换。开发者可以进一步研究这些代码,学习如何在自己的项目中实现类似的功能。
基于WebSocket的车辆GPS信息实时推送系统的实现 在现代信息化社会中,人们对实时信息的需求日益增长,特别是在交通领域,对车辆实时信息的需求尤为迫切。本文旨在解决车辆管理系统中如何实时获取车辆GPS信息的问题...
头部包含了帧类型(文本、二进制等)、掩码标志(客户端发送的数据必须被掩码)和其他控制信息。 3. **数据类型**:WebSocket支持两种数据帧类型,文本帧和二进制帧。文本帧用于传输UTF-8编码的字符串,而二进制帧...
在本案例中,我们将探讨如何使用Vue.js和Delphi 10.2之间的WebSocket通讯来读取卡信息。 1. **Vue.js中的WebSocket集成**: Vue.js本身并不直接支持WebSocket,但可以通过第三方库如`vue-websocket`或手动创建...
这个请求携带特定的头部信息,例如"Upgrade: websocket"和"Connection: Upgrade",以及一个经过编码的Sec-WebSocket-Key字段,服务器会用这个key返回一个Sec-WebSocket-Accept头以确认连接。 2. **帧协议**:...
需要注意的是,由于SpringSecurity的存在,前端连接时可能需要携带认证信息。 5. 实现消息推送:在服务端,可以通过WebSocketSession接口向特定用户或所有用户推送消息。 6. 错误处理:处理WebSocket连接异常关闭,...
在WebSocket服务器的实现中,gbase可能是用来处理服务器端的数据存储和查询,比如记录用户的连接信息、消息历史等。然而,没有更多的上下文,无法详细解释gbase的具体作用,这可能需要进一步的代码审查或文档查阅。 ...
处理数据帧时,需要注意帧头的解析,包括操作码、长度字段和掩码等信息。对于接收到的数据,服务端需要正确解码,然后根据业务逻辑进行处理。 文件"WebSocket4D.pas"很可能是该WebSocket服务端的核心代码,其中可能...
这样,当后台有新数据或事件发生时,服务器可以直接将这些信息推送到已连接的客户端,避免了不必要的网络开销和延迟。 在"执行一个操作后可以通知页面刷新"这个功能中,我们可以假设有一个前端页面,该页面通过...
4. 监听服务器发送的数据,通过onmessage事件处理接收到的信息。 5. 当不再需要连接时,关闭WebSocket连接。 在易语言端,可能需要设置监听端口,接收来自WebSocket客户端的连接请求,解析接收到的数据并做出相应的...
以下是一些关键的WebSocket知识点: 1. **WebSocket协议**:WebSocket基于TCP,通过HTTP/1.1的Upgrade头字段进行初始化,之后建立一个长期存在的连接,允许双向数据流。 2. **Tomcat的WebSocket支持**:Tomcat从...
在本项目中,我们关注的是如何将WebSocket整合到Spring MVC(Spring、SpringMVC、MyBatis)的SSM框架中,实现信息聊天功能。 1. **WebSocket基础** WebSocket协议是HTML5的一部分,它创建了一个持久的连接,允许...
相较于传统的HTTP协议,WebSocket允许数据双向传输,即服务器可以主动向客户端推送信息,而不仅仅是客户端向服务器发送请求。 标题中的“http-websocket代理”是指一个工具或服务,它能够帮助开发者通过HTTP协议来...
3. **协议调试**:通过显示详细的帧信息,帮助开发者理解WebSocket通信的细节,定位可能的问题。 4. **性能测试**:支持发送大量消息,以评估服务器的处理能力和响应速度。 5. **多会话管理**:可以同时管理多个...
WebSocket 技术可以实现客户端与服务器之间的实时双向通信,使得应用程序可以实时地获取到服务器的数据更新信息。WebSocket 技术的出现,使得开发者可以更方便地构建实时交互的应用程序。 然而,在 Android 的原生...
WebSocket是一种在客户端与服务器之间建立持久连接的协议,它允许双方进行全双工通信,即数据可以在两个方向上同时传输,极大地提高了实时性。在本例中,我们将探讨如何使用WebSocket从服务端获取图片并在HTML5...
`TestWbSocket.sln`文件是一个Visual Studio解决方案,包含了整个项目的源代码和配置信息。`.vs`目录包含了Visual Studio工作区的配置文件,这些文件不直接参与编译和运行,但会影响开发者的工作环境。`TestWbSocket...