前端

websocket及server环境配置

2019-04-01  本文已影响68人  avery1

看完让你彻底搞懂Websocket原理

WebSocket 教程

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

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

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。

当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。

以下 API 用于创建 WebSocket 对象。

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

pywebsocket配置

在linux上安装psweboscket

安装git

sudo yum install git

git --version

安装pywebsocket

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

进入pywebsocket路径下

python setup.py build

python setup.py install

进入mod_pywebsocket路径下启动pywebsocket

cd mod_pywebsocket/

ls

python standalone.py -p 9998 -w ../example

将虚拟机端口映射到本机(vmware workstation或者putty, 我用的putty还比较快)

本机html代码,运行点击。

<!DOCTYPE HTML>

<html>

  <head>

  <meta charset="utf-8">

  <title>菜鸟教程(runoob.com)</title>

      <script type="text/javascript">

        function WebSocketTest()

        {

            if ("WebSocket" in window)

            {

              console.log("您的浏览器支持 WebSocket!");

              // 打开一个 web socket

              var ws = new WebSocket("ws://localhost:9998/echo");

              ws.onopen = function()

              {

                  // Web Socket 已连接上,使用 send() 方法发送数据

                  ws.send("发送数据");

                  console.log("数据发送中...");

              };

              ws.onmessage = function (evt)

              {

                  var received_msg = evt.data;

                  console.log("数据已接收...");

              };

              ws.onclose = function()

              {

                  // 关闭 websocket

                  console.log("连接已关闭...");

              };

            }

            else

            {

              // 浏览器不支持 WebSocket

              console.log("您的浏览器不支持 WebSocket!");

            }

        }

      </script>

  </head>

  <body>

      <div id="sse">

        <a href="javascript:WebSocketTest()">运行 WebSocket</a>

      </div>

  </body>

</html>

结果,说明pywebsocket已经启动起来了。

关掉linux端pywebsocket服务

上一篇下一篇

猜你喜欢

热点阅读