脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → 基础知识 → Javascript WebSocket

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

 更新时间：2014年04月16日 09:48:49   作者：  
网络套接字是下一代WEB应用程序双向通信技术，它是基于一个独立的socket并且需要客户端浏览器支持HTML5

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

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

复制代码 代码如下:
var Socket = new WebSocket(url, [protocal] );


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

WEB Socket属性：

属性 说明
Socket.readyState readyState的代表的ReadOnly属性的连接状态。它可以有以下值：

  1. 一个0值表示该连接尚未建立。

  2. 值为1表示连接建立和沟通是可能的。

  3. 值为2表示连接是通过将结束握手。

  4. 值为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>

您可能感兴趣的文章:

相关文章

  • javascript this详细介绍

    javascript this详细介绍

    这篇文章主要介绍了javascript this详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 简单掌握JavaScript中const声明常量与变量的用法

    简单掌握JavaScript中const声明常量与变量的用法

    const和let一样,也是ES6版本中引入的新关键字,下面我们就通过例子来简单掌握JavaScript中const关键词声明常量与变量的用法
    2016-05-05
  • 小议JavaScript中Generator和Iterator的使用

    小议JavaScript中Generator和Iterator的使用

    这篇文章主要介绍了小议JavaScript中Generator和Iterator的使用,文中举了一个简单的示例来说明二者之间的配合,需要的朋友可以参考下
    2015-07-07
  • splice slice区别

    splice slice区别

    splice slice区别...
    2006-10-10
  • Javascript 按位与运算符 (&)使用介绍

    Javascript 按位与运算符 (&)使用介绍

    Javascript 按位与运算符 (&)，用于对两个 32 位表达式执行按位“与”运算，而一般表达式里面都是十进制整数，此时需要先转换成对应的二进制，然后向前加0，补足32位
    2014-02-02
  • Javascript入门学习第一篇 js基础

    Javascript入门学习第一篇 js基础

    这是我看了DOM编程艺术，悟透JavaScript，javascript权威指南5做的笔记，我资质不深，不能写出高深的文章， 如果你觉得笔记写得不好，可以不看我以后的。这篇文章就当作浪费你几分钟。
    2008-07-07
  • JS判断浏览器之Navigator对象

    JS判断浏览器之Navigator对象

    JS判断浏览器之Navigator对象...
    2007-01-01
  • javascript基础知识分享之类与函数化

    javascript基础知识分享之类与函数化

    在C++中是以class来声明一个类的,JavaScript与C++不同,它使用了与函数一样的function来声明,这就让许多学Jscript的朋友把类与函数混在一起了,在Jscript中函数与类确实有些混,但使用久了自然会理解,这篇文章是针对想进攻面向对象编程的朋友而写,就不打算讨论得太深了
    2016-02-02
  • 使用JavaScript 实现各种跨域的方法

    使用JavaScript 实现各种跨域的方法

    本篇文章是对在JavaScript中实现各种跨域方法的介绍。需要的朋友参考下
    2013-05-05
  • 10分钟掌握XML、JSON及其解析

    10分钟掌握XML、JSON及其解析

    最近一段时间，个人综合了之前对XML、JSON的一些了解，参考了相关资料，再结合视频的代码，把自己的一些思考融入了这篇总结文档中，同时尝试用通俗诙谐的语言风格来阐述，期望能给感兴趣的读者带来帮助
    2016-10-10

最新评论