Understanding HTML5's WebSocket
In the HTML5 specification, my favorite web technology is the WebSocket API, which is quickly becoming popular. WebSocket provides a welcome alternative to the Ajax technology we've been using for the past few years. This new API provides a way to efficiently push messages from the client to the server using simple syntax. Let’s take a look at HTML5’s WebSocket API: it can be used on both client and server sides. And there is an excellent third-party API called Socket.IO.
1. What is WebSocket API?
WebSocket API is the next generation client-server asynchronous communication method. This communication replaces a single TCP socket, using the ws or wss protocol, and can be used by any client and server program. WebSocket is currently standardized by the W3C. WebSocket is already supported by browsers such as Firefox 4, Chrome 4, Opera 10.70 and Safari 5.
The great thing about the WebSocket API is that the server and client can push information to each other at any time within a given time range. WebSocket is not limited to Ajax (or XHR) communication, because Ajax technology requires the client to initiate a request, and the WebSocket server and client can push information to each other;
The clever thing about Ajax technology is that there is no designed way to use it. WebSocket is created for the specified target and used to push messages in both directions.
2. Usage of WebSocket API
Only focus on the client-side API, because each server-side language has its own API. The code snippet below opens a connection, creates an event listener for the connection, disconnects the message, sends the message back to the server, and closes the connection.
CODE:
// 创建一个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() };
WebSocket is a protocol for full-duplex communication on a single TCP connection that HTML5 began to provide.
In the WebSocket API, the browser and the server only need to perform a handshake action, and then a fast channel is formed between the browser and the server. Data can be transferred directly between the two.
The browser sends a request to the server to establish a WebSocket connection through JavaScript. After the connection is established, the client and the server can directly exchange data through the TCP connection.
After you obtain the Web Socket connection, you can send data to the server through the send() method, and accept the data returned by the server through the onmessage event.
The following API is used to create WebSocket objects.
var socket = new WebSocket(url,[protocol]);
The first parameter url in the above code specifies the URL of the link. The second parameter protocol is optional and specifies acceptable subprotocols.
WebSocket Properties
The following are the properties of the WebSocket object. Suppose we use the above code to create a socket object:
Socket.readyState The read-only property readyState indicates the connection status, which can be the following values:
1. 0-Indicates that the connection has not yet been established.
2. 1-Indicates that the link has been established and can be accessed.
3. 2-Indicates that the connection is being closed.
4. 3-Indicates that the connection has been closed or the connection cannot be opened.
Socket.bufferedAmount Read-only butteredAmount The number of UTF-8 text bytes that have been send() placed in the queue and are waiting for transmission, but have not yet been sent.
WebSocket events
The following are related events of the WebSocket object. Suppose we use the Socket:
event: Open Message Error Close
Incident processing program: Socket.onopen Socket.onMessage Socket.onClose
Description: Connect to create triggering client acceptance services Device data Triggered when a communication error occurs Triggered when the connection is closed
WebSocket method
The following are the relevant methods of the WebSocket object. Suppose we use the above code to create a Socket object:
Method: Socket.send() Socket.close()
Description: Send data using the connection Close the connection
The above is the detailed content of Understanding HTML5 WebSocket. For more information, please follow other related articles on the PHP Chinese website!

一、什么是websocket接口使用websocket建立长连接,服务端和客户端可以互相通信,服务端只要有数据更新,就可以主动推给客户端。WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocketAPI中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在WebSocketAPI中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

在近几年的互联网应用中,Websocket已经成为了一种非常重要的通信协议。ThinkPHP6作为一款优秀的PHP开发框架,也提供了对Websocket的支持。不过,在使用Websocket时,我们通常会涉及到跨域、负载均衡等问题,因此,在这篇文章中,我们将介绍如何在ThinkPHP6中使用Nginx反向代理Websocket。首先,我们需要明确一下Webs

近年来,WebSocket技术日渐流行,成为了浏览器与服务器之间进行实时通信的标准选择。在Python中,我们可以通过一些成熟的库来实现WebSocket服务端的开发。本文将在介绍WebSocket技术的基础上,探索如何利用Python开发WebSocket服务端。一、什么是WebSocketWebSocket是一种在单个TCP

许多应用程序,如游戏和直播等场景,需要一种机制来尽可能快地发送消息,同时可以接受无序、不可靠的数据传输方式。本机应用程序虽然可以使用原始 UDP 套接字,但这些在 Web 上不可用,因为它们缺乏加密、拥塞控制、同意发送机制(以防止 DDoS 攻击)。

1、引入依赖org.springframework.bootspring-boot-starter-websocketorg.projectlomboklombokcom.alibabafastjson1.2.32、WebSocketConfig开启WebSocketpackagecom.shucha.deveiface.web.config;/***@authortqf*@Description*@Version1.0*@since2022-04-1215:35*/importorg.spri

本篇文章给大家带来了关于php+socket的相关知识,其中主要介绍了怎么使用php原生socket实现一个简易的web聊天室?感兴趣的朋友下面一起来看一下,希望对大家有帮助。

在现代Web应用程序开发中,WebSocket是实现即时通信和实时数据传输的常用技术。SpringBoot框架提供了集成WebSocket的支持,使得开发者可以非常方便地实现推送和通知功能。本文将介绍SpringBoot中如何使用WebSocket实现推送和通知功能,并演示一个简单的实时在线聊天室的实现。创建SpringBoot项目首先,我们需要创建一

随着现代网络应用程序的增多,WebSocket技术也变得非常流行。它是一项基于TCP协议的长连接技术,可以在客户端和服务器之间创建双向通信管道。在本文中,我们将介绍如何在Linux系统中使用WebSocket技术来创建一个简单的实时聊天应用程序。一、安装Node.js要使用WebSocket,首先需要在Linux系统中安装Node.j


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software

Atom editor mac version download
The most popular open source editor
