管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

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

　　一旦你了解了网络套接字与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>

教程首页 更多教程