{"id":4371,"date":"2016-07-21T08:13:05","date_gmt":"2016-07-21T12:13:05","guid":{"rendered":"https:\/\/qxf2.com\/blog\/?p=4371"},"modified":"2018-04-03T10:38:17","modified_gmt":"2018-04-03T14:38:17","slug":"websocket","status":"publish","type":"post","link":"https:\/\/qxf2.com\/blog\/websocket\/","title":{"rendered":"WebSocket testing"},"content":{"rendered":"

A WebSocket<\/a> is a standard protocol for two-way data transfer between a client and server. It is supported by all modern browsers. <\/p>\n

\n

Why this post?<\/h3>\n

My know-how of WebSocket connections was very limited. When I had to test an application which involved a WebSocket connection, I couldn’t find much information on how to go about testing it. It took me a bit of time to research on it and know more about it. Here is an attempt from a tester to make life simple for all my fellow testers who face a similar scenario.<\/p>\n

\n

What kind of applications use WebSockets<\/h3>\n

WebSockets offers connections that are both persistent and bi-directional. This means that the server can actively push information to the client and the client can push information to the server any time. So in case your application needs to get server side data that’s constantly changing WebSockets may be ideal. Applications like social networking sites, chat, gaming, stock market data sites, etc. use WebSockets<\/p>\n

\n

How do you begin testing Websockets?<\/h3>\n

Below are some of the important things you need to know to test WebSocket. We will take https:\/\/www.websocket.org\/echo.html <\/a> as an example. In this application, we can open a WebSocket connection by clicking on connect button and also send and receive frame data.<\/p>\n

1. How do you track WebSocket using your browser
\n2. WebSocket Protocol
\n3. Testing Websocket API<\/p>\n

\n

Step1. How do you track WebSocket using your browser<\/h3>\n

Browsers like Chrome and Firefox helps you track WebSocket traffic. <\/p>\n

a. Using Chrome Dev Tools:<\/p><\/blockquote>\n

Open the developer tools after connecting to https:\/\/www.websocket.org\/echo.html <\/a> and open the network tab. Now click on connect. You should be able to see a WS tab which will have the Get request with Status Code: 101 Web Socket Protocol Handshake.<\/p>\n

\"WebSocket<\/a><\/p>\n

b. Using Websocket Monitor Plugin for Firefox:<\/p><\/blockquote>\n

Websocket Monitor<\/a> is a plugin you can add to your Firefox browser. Once you have added the plugin you can a see a tab called Web Sockets<\/em> when you go to Developer options. This helps you track Web Sockets similarly as you have for chrome browser<\/p>\n

\"WebSocket<\/a><\/p>\n

\n

Step2. The WebSocket Protocol<\/h3>\n

The WebSocket Protocol <\/a> has two parts:
\na. Handshake
\nb. Data transfer.<\/p>\n

The protocol switch from HTTP to WebSocket is referred to as a WebSocket handshake. The browser sends a request to the server, indicating that it wants to switch protocols from HTTP to WebSocket. The client expresses its desire through the Upgrade header<\/p>\n

For the chat application in websocket.org the handshake request looks like this.<\/p>\n

\r\n        Request URL:wss:\/\/echo.websocket.org\/?encoding=text\r\n        Request Method:GET\r\n        <\/pre>\n
   Request Header from client to server looks like this:<\/p>\n
\r\n        Host: echo.websocket.org\r\n        Upgrade: websocket\r\n        Connection: Upgrade\r\n        Sec-WebSocket-Key: V\/HjGWrwuzgpv+yoWuIhng==\r\n        Origin: https:\/\/www.websocket.org\r\n        Sec-WebSocket-Version: 13\r\n        <\/pre>\n
   Response<\/p>\n
\r\n        Status Code:101 Web Socket Protocol Handshake\r\n        <\/pre>\n
   The Response Header from server looks as follows:<\/p>\n
\r\n        Upgrade: websocket\r\n        Connection: Upgrade\r\n        Sec-WebSocket-Accept: qHHKA5IeLEhMfkYgo1ItVR9Zd70=\r\n        <\/pre>\n
Once the client and server have both sent their handshakes, and if the handshake was successful, then the data transfer part starts. This is a two-way communication channel where each side can independently send their data. The data message is composed of one or more frames. For our application, the request and response frames look like below
\n\"Web<\/a><\/p>\n
The WebSocket handshake can also be closed. The close frame may contain a body that indicates a reason for closing, such as endpoint shutting down, an endpoint having received a frame too large, or an endpoint having received a frame that does not conform to the format expected by the endpoint.<\/p>\n
\n
Step3. Testing WebSocket API<\/h3>\n
Now once you know about WebSocket Protocol and how to track the WebSockets we will see how can we test these API’s. At Qxf2<\/a> Services we love Python. So naturally this tutorial uses Python. <\/p>\n
a. WebSocket client for python:<\/p><\/blockquote>\n
I will use websocket-client<\/a> as it is very easy to use.
\nIf you have pip just run the below command to install it.<\/p>\n
\r\nsudo pip install websocket-client\r\n<\/pre>\n
b. Python code to test WebSocket<\/p><\/blockquote>\n
This is a simple example using Python to connect to websocket.org. Once a WebSocket connection is established we will send data to server and print the response we receive back from server<\/p>\n
\r\nimport websocket \r\n\r\nws = websocket.WebSocket()\r\n# Connect to host url\r\nws.connect(\"wss:\/\/echo.websocket.org\/\")\r\nsend_string = \"Testing WebSocket\"\r\nprint \"Sending: \",send_string\r\n# Use ws.send() to send data to server\r\nws.send(send_string)\r\n# Use ws.recv() to get the data sent from server\r\nresult = ws.recv()\r\nprint \"Received: \",result\r\n# Use ws.close() to close the WebSocket handshake\r\nws.close()\r\n\r\n<\/pre>\n
\n
Well, that seems easy now. We would love to hear your feedback and questions in the comments<\/p>\n
If you liked this article, learn more about Qxf2’s<\/a> testing services for startups.<\/strong><\/p>\n
\n","protected":false},"excerpt":{"rendered":"
A WebSocket is a standard protocol for two-way data transfer between a client and server. It is supported by all modern browsers. Why this post? My know-how of WebSocket connections was very limited. When I had to test an application which involved a WebSocket connection, I couldn’t find much information on how to go about testing it. It took me […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43,18,112],"tags":[111],"class_list":["post-4371","post","type-post","status-publish","format-standard","hentry","category-api-testing","category-python","category-websocket","tag-websocket"],"_links":{"self":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/4371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/comments?post=4371"}],"version-history":[{"count":24,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/4371\/revisions"}],"predecessor-version":[{"id":4524,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/posts\/4371\/revisions\/4524"}],"wp:attachment":[{"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/media?parent=4371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/categories?post=4371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qxf2.com\/blog\/wp-json\/wp\/v2\/tags?post=4371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}