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

184 阅读 0 评论 122 点赞

我是靠谱客的博主善良过客，最近开发中收集的这篇文章主要介绍Javascript WebSocket使用实例介绍（简明入门教程），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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