Python通过websocket与js客户端通信示例分析

具体的 websocket 介绍可见 http://zh.wikipedia.org/wiki/WebSocket

这里,介绍如何使用 Python 与前端 js 进行通信。

websocket 使用 HTTP 协议完成握手之后,不通过 HTTP 直接进行 websocket 通信。

于是,使用 websocket 大致两个步骤:使用 HTTP 握手,通信。

js 处理 websocket 要使用 ws 模块; Python 处理则使用 socket 模块建立 TCP 连接即可,比一般的 socket ,只多一个握手以及数据处理的步骤。

握手

过程

包格式

js 客户端先向服务器端 python 发送握手包,格式如下:

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

服务器回应包格式:

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

其中, Sec-WebSocket-Key 是随机的,服务器用这些数据构造一个 SHA-1 信息摘要。

方法为: key+migic , SHA-1  加密, base-64 加密,如下:

Python 中的处理代码

MAGIC_STRING = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
res_key = base64.b64encode(hashlib.sha1(sec_key + MAGIC_STRING).digest())

握手完整代码

js 端

js 中有处理 websocket 的类,初始化后自动发送握手包,如下:

var socket = new WebSocket('ws://localhost:3368');

Python 端

Python 用 socket 接受得到握手字符串,处理后发送

HOST = 'localhost'
PORT = 3368
MAGIC_STRING = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
HANDSHAKE_STRING = "HTTP/1.1 101 Switching Protocols\r\n" \
      "Upgrade:websocket\r\n" \
      "Connection: Upgrade\r\n" \
      "Sec-WebSocket-Accept: {1}\r\n" \
      "WebSocket-Location: ws://{2}/chat\r\n" \
      "WebSocket-Protocol:chat\r\n\r\n"

def handshake(con):
#con为用socket,accept()得到的socket
#这里省略监听,accept的代码,具体可见blog:http://blog.csdn.net/ice110956/article/details/29830627
 headers = {}
 shake = con.recv(1024)

 if not len(shake):
  return False

 header, data = shake.split('\r\n\r\n', 1)
 for line in header.split('\r\n')[1:]:
  key, val = line.split(': ', 1)
  headers[key] = val

 if 'Sec-WebSocket-Key' not in headers:
  print ('This socket is not websocket, client close.')
  con.close()
  return False

 sec_key = headers['Sec-WebSocket-Key']
 res_key = base64.b64encode(hashlib.sha1(sec_key + MAGIC_STRING).digest())

 str_handshake = HANDSHAKE_STRING.replace('{1}', res_key).replace('{2}', HOST + ':' + str(PORT))
 print str_handshake
 con.send(str_handshake)
return True

通信

不同版本的浏览器定义的数据帧格式不同, Python 发送和接收时都要处理得到符合格式的数据包,才能通信。

Python 接收

Python 接收到浏览器发来的数据,要解析后才能得到其中的有用数据。

浏览器包格式

固定字节:

( 1000 0001 或是 1000 0002 )这里没用,忽略

包长度字节:

第一位肯定是 1 ,忽略。剩下 7 个位可以得到一个整数 (0 ~ 127) ,其中

( 1-125 )表此字节为长度字节,大小即为长度;

(126)表接下来的两个字节才是长度;

(127)表接下来的八个字节才是长度;

用这种变长的方式表示数据长度,节省数据位。

mark 掩码:

mark 掩码为包长之后的 4 个字节,之后的兄弟数据要与 mark 掩码做运算才能得到真实的数据。

兄弟数据:

得到真实数据的方法:将兄弟数据的每一位 x ,和掩码的第 i%4 位做 xor 运算,其中 i 是 x 在兄弟数据中的索引。

完整代码

def recv_data(self, num):
 try:
  all_data = self.con.recv(num)
  if not len(all_data):
   return False
 except:
  return False
 else:
  code_len = ord(all_data[1]) & 127
  if code_len == 126:
   masks = all_data[4:8]
   data = all_data[8:]
  elif code_len == 127:
   masks = all_data[10:14]
   data = all_data[14:]
  else:
   masks = all_data[2:6]
   data = all_data[6:]
  raw_str = ""
  i = 0
  for d in data:
   raw_str += chr(ord(d) ^ ord(masks[i % 4]))
   i += 1
  return raw_str

js 端的 ws 对象,通过 ws.send(str) 即可发送

ws.send(str)

Python 发送

Python 要包数据发送,也需要处理,发送包格式如下

固定字节:固定的 1000 0001( ‘ \x81 ′ )

包长:根据发送数据长度是否超过 125 , 0xFFFF(65535) 来生成 1 个或 3 个或 9 个字节,来代表数据长度。

def send_data(self, data):
 if data:
  data = str(data)
 else:
  return False
 token = "\x81"
 length = len(data)
 if length < 126:
  token += struct.pack("B", length)
 elif length <= 0xFFFF:
  token += struct.pack("!BH", 126, length)
 else:
  token += struct.pack("!BQ", 127, length)
 #struct为Python中处理二进制数的模块,二进制流为C,或网络流的形式。
 data = '%s%s' % (token, data)
 self.con.send(data)
 return True

js 端通过回调函数 ws.onmessage() 接受数据

ws.onmessage = function(result,nTime){
alert("从服务端收到的数据:");
alert("最近一次发送数据到现在接收一共使用时间:" + nTime);
console.log(result);
}

最终代码

Python服务端

# _*_ coding:utf-8 _*_
__author__ = 'Patrick'

import socket
import threading
import sys
import os
import MySQLdb
import base64
import hashlib
import struct

# ====== config ======
HOST = 'localhost'
PORT = 3368
MAGIC_STRING = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11'
HANDSHAKE_STRING = "HTTP/1.1 101 Switching Protocols\r\n" \
      "Upgrade:websocket\r\n" \
      "Connection: Upgrade\r\n" \
      "Sec-WebSocket-Accept: {1}\r\n" \
      "WebSocket-Location: ws://{2}/chat\r\n" \
      "WebSocket-Protocol:chat\r\n\r\n"

class Th(threading.Thread):
 def __init__(self, connection,):
  threading.Thread.__init__(self)
  self.con = connection

 def run(self):
  while True:
   try:
     pass
  self.con.close()

 def recv_data(self, num):
  try:
   all_data = self.con.recv(num)
   if not len(all_data):
    return False
  except:
   return False
  else:
   code_len = ord(all_data[1]) & 127
   if code_len == 126:
    masks = all_data[4:8]
    data = all_data[8:]
   elif code_len == 127:
    masks = all_data[10:14]
    data = all_data[14:]
   else:
    masks = all_data[2:6]
    data = all_data[6:]
   raw_str = ""
   i = 0
   for d in data:
    raw_str += chr(ord(d) ^ ord(masks[i % 4]))
    i += 1
   return raw_str

 # send data
 def send_data(self, data):
  if data:
   data = str(data)
  else:
   return False
  token = "\x81"
  length = len(data)
  if length < 126:
   token += struct.pack("B", length)
  elif length <= 0xFFFF:
   token += struct.pack("!BH", 126, length)
  else:
   token += struct.pack("!BQ", 127, length)
  #struct为Python中处理二进制数的模块,二进制流为C,或网络流的形式。
  data = '%s%s' % (token, data)
  self.con.send(data)
  return True

 # handshake
 def handshake(con):
  headers = {}
  shake = con.recv(1024)

  if not len(shake):
   return False

  header, data = shake.split('\r\n\r\n', 1)
  for line in header.split('\r\n')[1:]:
   key, val = line.split(': ', 1)
   headers[key] = val

  if 'Sec-WebSocket-Key' not in headers:
   print ('This socket is not websocket, client close.')
   con.close()
   return False

  sec_key = headers['Sec-WebSocket-Key']
  res_key = base64.b64encode(hashlib.sha1(sec_key + MAGIC_STRING).digest())

  str_handshake = HANDSHAKE_STRING.replace('{1}', res_key).replace('{2}', HOST + ':' + str(PORT))
  print str_handshake
  con.send(str_handshake)
  return True

def new_service():
 """start a service socket and listen
 when coms a connection, start a new thread to handle it"""

 sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
 try:
  sock.bind(('localhost', 3368))
  sock.listen(1000)
  #链接队列大小
  print "bind 3368,ready to use"
 except:
  print("Server is already running,quit")
  sys.exit()

 while True:
  connection, address = sock.accept()
  #返回元组(socket,add),accept调用时会进入waite状态
  print "Got connection from ", address
  if handshake(connection):
   print "handshake success"
   try:
    t = Th(connection, layout)
    t.start()
    print 'new thread for client ...'
   except:
    print 'start new thread error'
    connection.close()

if __name__ == '__main__':
 new_service()

js客户 端

<script>
var socket = new WebSocket('ws://localhost:3368');
ws.onmessage = function(result,nTime){
alert("从服务端收到的数据:");
alert("最近一次发送数据到现在接收一共使用时间:" + nTime);
console.log(result);
}
</script>
时间: 2014-06-22

详解WebSocket+spring示例demo(已使用sockJs库)

1.简介 作为下一代的Web标准,HTML5拥有许多引人注目的新特性,如 Canvas.本地存储.多媒体编程接口.WebSocket等等.这其中有"Web的 TCP"之称的 WebSocket格外吸引开发人员的注意.WebSocket的出现使得浏览器提供对 Socket的支持成为可能,从而在浏览器和服务器之间提供了一个基于TCP连接的双向通道.Web开发人员可以非常方便地使用WebSocket构建实时 web 应用,开发人员的手中从此又多了一柄神兵利器. Web 应用的信息交互过程通常

基于html5和nodejs相结合实现websocket即使通讯

最近都在学习HTML5,做canvas游戏之类的,发现HTML5中除了canvas这个强大的工具外,还有WebSocket也很值得注意.可以用来做双屏互动游戏,何为双屏互动游戏?就是通过移动端设备来控制PC端网页游戏.这样的话就要用到实时通讯了,而WebSocket无疑是最合适的.WebSocket相较于HTTP来说,有很多的优点,主要表现在WebSocket只建立一个TCP连接,可以主动推送数据到客户端,而且还有更轻量级的协议头,减少数据传送量.所以WebSocket暂时来说是实时通讯的最佳协

Javascript WebSocket使用实例介绍(简明入门教程)

一旦你了解了网络套接字与WEB服务器的连接,你将可以从浏览器发送数据到服务器并且可以接收由服务器返回的响应数据. 以下是创建一个新的WebSocket对象的API: 复制代码 代码如下: var Socket = new WebSocket(url, [protocal] ); 这里第一个参数是指要连接的URL,第二个参数是可选的,如果需要的话,则是指定一个的服务器支持的协议. WEB Socket属性: 属性 说明 Socket.readyState readyState的代表的ReadOnl

JS实现websocket长轮询实时消息提示的效果

效果图如下: 参考代码如下: jsp代码: <%@ page contentType="text/html;charset=UTF-8" language="java"%> <div class="page-header navbar navbar-fixed-top"> <div class="page-header-inner"> <div class="page-log

JavaScript之WebSocket技术详解

概述 HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话.这多多少少带来一些不便,尤其在服务器端与客户端需要持续交换数据的场合(比如网络聊天),更是如此.为了解决这个问题,HTML5提出了浏览器的WebSocket API. WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信.举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信:WebSocket则是

浅析nodejs实现Websocket的数据接收与发送

WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术.在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道.两者之间就直接可以数据互相传送. WebSocket是一个通信的协议,分为服务器和客户端.服务器放在后台,保持与客户端的长连接,完成双方通信的任务.客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接.

原生nodejs使用websocket代码分享

安装: npm  install  ws 服务端(nodejs): var WebSocketServer = require('ws').Server, wss = new WebSocketServer({ port: 8080 }); wss.on('connection', function (ws) { console.log('client connected'); ws.on('message', function (message) { console.log(message);

nodejs body-parser 解析post数据实例

安装 $ npm install body-parser API var bodyPaeser =require('body-parser') 可以通过body-parser 对象创建中间件,当接收到客户端请求时所有的中间件都会给req.body 添加属性,请求体为空,则解析为空{} (或者出现错误). bodyParser.json(options) 中间件只会解析 json ,允许请求提任意Unicode编码支持 gzip 和 deflate 编码. options 一个对象,有以下属性 i

详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据

最近使用了protobuf进行数据交互,发送在node.js接收前端的二进制数据出现了数据错误等问题.后来发现思路上面的问题,在req.on('data',()=>{})事件中的处理不适当才引发数据错乱.借此发 我先直接贴正确接收二进制数据代码 const server = http.createServer((req, res) => { if(req.method==='OPTIONS'){ res.setHeader("Access-Control-Allow-Origin&q

java使用Socket类接收和发送数据

网络应用分为客户端和服务端两部分,而Socket类是负责处理客户端通信的Java类.通过这个类可以连接到指定IP或域名的服务器上,并且可以和服务器互相发送和接受数据.在本文及后面的数篇文章中将详细讨论Socket类的使用,内容包括Socket类基础.各式各样的连接方式.get和set方法.连接过程中的超时以及关闭网络连接等. 在本文中,我们将讨论使用Socket类的基本步骤和方法.一般网络客户端程序在连接服务程序时要进行以下三步操作. 连接服务器 发送和接收数据 关闭网络连接 一.连接服务器 在

nodejs 十六进制字符串型数据与btye型数据相互转换

byte型转换十六进制字符串 /** * byte型转换十六进制 * @param b * @returns {string} * @constructor */ const Bytes2HexString = (b)=> { let hexs = ""; for (let i = 0; i < b.length; i++) { let hex = (b[i]).toString(16); if (hex.length === 1) { hexs = '0' + hex;

Python3 串口接收与发送16进制数据包的实例

如下所示: import serial import string import binascii s=serial.Serial('com4',9600) s.open() #接收 n=s.inwaiting() if n: data= str(binascii.b2a_hex(s.read(n)))[2:-1] print(data) #发送 d=bytes.fromhex('10 11 12 34 3f') s.write(d) s.close() 以上这篇Python3 串口接收与发送1

Layui数据表格 前后端json数据接收的方法

先上效果图: 前端数据表格: <div class="x-body"> <%-- 数据表格 --%> <table class="layui-table" lay-data="{ id:'test', url:'/menu/page', page:true, limits: [10,20,50], //每页条数的选择项,默认:[10,20,30,40,50,60,70,80,90] limit: 10, //每页默认显示的数量

对Layer弹窗使用及返回数据接收的实例详解

Layer做为弹窗,主页面代码: 注意1. callback()方法 返回字符串,再data:JSON.parse(res)转为ajax提交时的json参数 注意2. textarea 上使用append方法没有效果,改写: var str = $("#area").val() + "\n"+d; $("#area").val(str); //引入js 必须要有(1.8以上版本) jquery <script src="__PUB

使用ajax接收后台发送过来的json数据方法

今天给大家带来一个简单的使用ajax接收后台返回json格式的demo 废话不多说直接上代码 后台代码 package com.sidan.outjson; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpSe