Javascript WebSocket使用实例介绍（简明入门教程）

2024-09-29 09:54:36

一旦你了解了网络套接字与WEB服务器的连接，你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据。

以下是创建一个新的WebSocket对象的API：

代码如下:

var Socket = new WebSocket(url, [protocal] );

这里第一个参数是指要连接的URL，第二个参数是可选的，如果需要的话，则是指定一个的服务器支持的协议。

WEB Socket属性：

属性	说明
Socket.readyState	readyState的代表的ReadOnly属性的连接状态。它可以有以下值：一个0值表示该连接尚未建立。值为1表示连接建立和沟通是可能的。值为2表示连接是通过将结束握手。值为3表示连接已关闭或无法打开。
Socket.bufferedAmount	读属性的bufferedAmount代表文本的字节数,utf - 8的排队使用send()方法。

WEB Socket事件：

事件	处理程序	说明
open	Socket.onopen	此事件发生在套接字建立连接。
message	Socket.onmessage	此事件发生时，客户端收到来自服务器的数据。
error	Socket.onerror	此事件发生时有任何通信错误。
close	Socket.onclose	此事件发生在连接关闭。

WEB Socket方法：

方法	说明
Socket.send()	send（data）方法用来连接传输数据。
Socket.close()	close（）方法将被用于终止任何现有的连接。

WEB Socket例子：

代码如下:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function WebSocketTest()
{
if ("WebSocket" in window)
{
     alert("WebSocket is supported by your Browser!");
     // Let us open a web socket
     var ws = new WebSocket("ws://localhost:9998/echo");
     ws.onopen = function()
     {
        // Web Socket is connected, send data using send()
        ws.send("Message to send");
        alert("Message is sent...");
     };
     ws.onmessage = function (evt)
     {
        var received_msg = evt.data;
        alert("Message is received...");
     };
     ws.onclose = function()
     {
        // websocket is closed.
        alert("Connection is closed...");
     };
}
else
{
     // The browser doesn't support WebSocket
     alert("WebSocket NOT supported by your Browser!");
}
}
</script>
</head>
<body>
<div id="sse">
   <a href="javascript:WebSocketTest()">Run WebSocket</a>
</div>
</body>
</html>

JS实现websocket长轮询实时消息提示的效果

效果图如下: 参考代码如下: jsp代码: <%@ page contentType="text/html;charset=UTF-8" language="java"%> <div class="page-header navbar navbar-fixed-top"> <div class="page-header-inner"> <div class="page-log
基于html5和nodejs相结合实现websocket即使通讯

最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏.这样的话就要用到实时通讯了,而WebSocket无疑是最合适的.WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量.所以WebSocket暂时来说是实时通讯的最佳协
JavaScript之WebSocket技术详解

概述 HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话.这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此.为了解决这个问题,HTML5提出了浏览器的WebSocket API. WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信.举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信:WebSocket则是
详解WebSocket+spring示例demo（已使用sockJs库）

1.简介作为下一代的Web标准,HTML5拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket等等.这其中有"Web的 TCP"之称的 WebSocket格外吸引开发人员的注意.WebSocket的出现使得浏览器提供对 Socket的支持成为可能,从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道.Web开发人员可以非常方便地使用WebSocket构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器. Web 应用的信息交互过程通常
浅析nodejs实现Websocket的数据接收与发送

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. WebSocket是一个通信的协议,分为服务器和客户端.服务器放在后台,保持与客户端的长连接,完成双方通信的任务.客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接.
Python通过websocket与js客户端通信示例分析

具体的 websocket 介绍可见 http://zh.wikipedia.org/wiki/WebSocket 这里,介绍如何使用 Python 与前端 js 进行通信. websocket 使用 HTTP 协议完成握手之后,不通过 HTTP 直接进行 websocket 通信. 于是,使用 websocket 大致两个步骤:使用 HTTP 握手,通信. js 处理 websocket 要使用 ws 模块: Python 处理则使用 socket 模块建立 TCP 连接即可,比一般的 soc
Javascript WebSocket使用实例介绍（简明入门教程）

一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据. 以下是创建一个新的WebSocket对象的API: 复制代码代码如下: var Socket = new WebSocket(url, [protocal] ); 这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议. WEB Socket属性: 属性说明 Socket.readyState readyState的代表的ReadOnl
Python简明入门教程

本文实例讲述了Python简明入门教程.分享给大家供大家参考.具体如下: 一.基本概念 1.数在Python中有4种类型的数--整数.长整数.浮点数和复数. (1)2是一个整数的例子. (2)长整数不过是大一些的整数. (2)3.23和52.3E-4是浮点数的例子.E标记表示10的幂.在这里,52.3E-4表示52.3 * 10-4. (4)(-5+4j)和(2.3-4.6j)是复数的例子. 2.字符串 (1)使用单引号(') (2)使用双引号(") (3)使用三引号('''或"&q
Lua脚本语言简明入门教程

这几天系统地学习了一下Lua这个脚本语言,Lua脚本是一个很轻量级的脚本,也是号称性能最高的脚本,用在很多需要性能的地方,比如:游戏脚本,nginx,wireshark的脚本,当你把他的源码下下来编译后,你会发现解释器居然不到200k,这是多么地变态啊(/bin/sh都要1M,MacOS平台),而且能和C语言非常好的互动.我很好奇得浏览了一下Lua解释器的源码,这可能是我看过最干净的C的源码了. 我不想写一篇大而全的语言手册,一方面是因为已经有了(见本文后面的链接),重要的原因是,因为大篇幅的文
JavaScript入门教程之引用类型

引用类型引用类型是一种数据结构,用于将数据和功能组织在一起.它也常被称为类,但这种称呼并不妥当.尽管 ECMAScript从技术上讲是一门面向对象的语言,但它不具备传统的面向对象语言所支持的类和接口等基本结构.引用类型有时候也被称为对象定义,因为它们描述的是一类对象所具有的属性和方法. 前面提到过,引用类型的值便是对象,在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,而对象则是某个特定引用类型的实例. var a=new Object(); 上面便声明了一个引用类
Apache Ant自动化脚本入门教程及常用命令介绍

一 Ant简介 Apache Ant是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的自动化构建.它是Apache软件基金会JAKARTA目录中的一个子项目,它有以下的优点: 跨平台性.Ant是纯Java语言编写的,所以具有很好的跨平台性操作简单.Ant是由一个内置任务和可选任务组成的.Ant运行时需要一个XML文件(构建文件). Ant通过调用target树,就可以执行各种任务.由于Ant构建文件是XML格式的文件,所以很容易维护和书写,而且结构清晰
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)

本文实例讲述了PHP正则表达式基本用法.分享给大家供大家参考,具体如下: Demo1.php <?php //尝试着写第一个正则表达式 //第一个参数,表示模式(就是和字符串去比较,匹配) //第二个参数,表示字符串 //如果整个函数模式和字符串比较后匹配了,那么返回真(true)1,否则返回假(false)0 //什么叫匹配,就是一个一个的比较过去 //按照什么规则??按照模式来匹配 //只要模式全部通过,那么就通过 //匹配和相等是两个概念 //因为目前的模式是一个整体,php //所以,字
PHP入门教程之表单与验证实例详解

本文实例讲述了PHP表单与验证.分享给大家供大家参考,具体如下: Demo1.php <?php ob_start(); //重新导向一个 URL //header() //header('Location:Demo2.php'); //上面这句话可以自动跳转到你所想要的页面. //header('Location:http://www.baidu.com'); //上面这句话自动跳转到百度上面去. echo 'baidu.com'; header('Location:http://www.ba
PHP入门教程之上传文件实例详解

本文实例讲述了PHP上传文件的方法.分享给大家供大家参考,具体如下: Demo1.php <form enctype="multipart/form-data" action="Demo2.php" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="2000000" /> 上传文件: &
PHP入门教程之面向对象基本概念实例分析

本文实例讲述了PHP面向对象基本概念.分享给大家供大家参考,具体如下: Demo1.php <?php //怎样去创建一个类格式:修饰符 class 类名{} //我们去创建一个电脑的类,这类可以创建出对象(生产出电脑) class Computer { //类名第一个字母大写 } //创建一台电脑出来,也就是对象的声明 //格式:变量 = new 类名(); //new Compuer() 表示实例化的过程(意思是创建一个对象) //$compuer1 = new Compuer() 这个过
git 入门教程之本地仓库和远程仓库的本质介绍

本地仓库和远程仓库在本质上没有太大区别,只不过一个是本地电脑,一个是远程电脑. 远程仓库不一定非得是 github 那种专门的"中央服务器",甚至局域网的另外一台电脑也可以充当"中央服务器"的角色,因为它存在的最初目的只是方便大家交换彼此的提交记录而已! 所以本地仓库和远程仓库的基本行为应该是一致的,约定俗成的规定是远程仓库一般不直接参与日常开发工作,主要作为项目托管中心. 某些自动化持续集成环境中也可能会直接操作远程仓库,这时远程仓库就真的和本地仓库没什么区别了!

Javascript WebSocket使用实例介绍（简明入门教程）

相关推荐

随机推荐