欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

webSocket入门

程序员文章站 2023-11-20 12:55:04
原理：Pub-Sub（发布和订阅） 它适用于发送者将数据（发布者）发送给抽象数量的收件人（订阅者），而无需指定他们是谁。 1、是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 2、客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket ......

原理：pub-sub（发布和订阅） 它适用于发送者将数据（发布者）发送给抽象数量的收件人（订阅者），而无需指定他们是谁。

1、是 html5 开始提供的一种在单个 tcp 连接上进行全双工通讯的协议

2、客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 websocket api 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

webSocket入门

 

3、实例

<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
   
      <script type="text/javascript">
         function websockettest(){
            if ("websocket" in window){
               alert("您的浏览器支持 websocket!");
               
               // 打开一个 web socket
               var ws = new websocket(url, [protocol]);// protocol 是可选的，指定了可接受的子协议。
                
               ws.onopen = function(){//连接建立时触发
                  
                  ws.send("发送数据");// web socket 已连接上，使用 send() 方法发送数据
                  alert("数据发送中...");
               };                
               ws.onmessage = function (evt){ //客户端接收服务端数据时触发
               
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };                
               ws.onerror = function(){//通信发生错误时触发
                   alert("连接错误..."); 
               };
               ws.onclose = function(){ //连接关闭时触发
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }else{
               // 浏览器不支持 websocket
               alert("您的浏览器不支持 websocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:websockettest()">运行 websocket</a>
      </div>
      
   </body>
</html>

4、创建一个支持 websocket 的服务，从  下载 mod_pywebsocket ,或者使用 git 命令下载：

git clone https://github.com/google/pywebsocket.git

mod_pywebsocket 需要 python 环境支持

mod_pywebsocket 是一个 apache http 的 web socket扩展，安装步骤如下：

解压下载的文件。

进入 pywebsocket 目录。

执行命令：

$ python setup.py build
$ sudo python setup.py install
查看文档说明:

$ pydoc mod_pywebsocket

开启服务

在 pywebsocket/mod_pywebsocket 目录下执行以下命令：
$ sudo python standalone.py -p 9998 -w ../example/

以上命令会开启一个端口号为 9998 的服务，使用 -w 来设置处理程序 echo_wsh.py 所在的目录。

现在我们可以在 chrome 浏览器打开前面创建的 runoob_websocket.html 文件。如果你的浏览器支持 websocket(), 点击"运行 websocket"，你就可以看到整个流程各个步骤弹出的窗口

上一篇： js仿网易表单及时验证功能

下一篇： Vue -- 项目报错整理(1)：RangeError: Maximum call stack size exceeded

推荐阅读