什么地JS?什么是JSP?

2023-02-18 18:23:02JavaScript016

什么地JS?什么是JSP?,第1张

JS:

一种代码,英文名JAVA SCRIPT,是java 脚本语言,很多网站页面两边有小广告,那个就是JS搞的~~~

附: (JS代码大全):

1. oncontextmenu="window.event.returnvalue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table>可用于Table

2. <body onselectstart="return false">取消选取、防止复制

3. onpaste="return false" 不准粘贴

4. oncopy="return false" oncut="return false" 防止复制

5. <link rel="Shortcut Icon" href="favicon.ico">IE地址栏前换成自己的图标

6. <link rel="Bookmark" href="favicon.ico">可以在收藏夹中显示出你的图标

7. <input style="ime-mode:-Disabled">关闭输入法

8. 永远都会带着框架

if (window == top)top.location.href = "frames.htm"//frames.htm为框架网页

// --></script>

9. 防止被人frame

<SCRIPT LANGUAGE=javascript><!--

if (top.location != self.location)top.location=self.location

// --></SCRIPT>

10. 网页将不能被另存为

11. <input type=button value=查看网页源代码

onclick="window.location = `view-source:`+ http://www.51js.com/`">

12.删除时确认

<a href=`javascript:if(confirm("确实要删除吗?"location="boos.asp?&areyou=删除&page=1"`>删

除</a>

13. 取得控件的绝对位置

//javascript

function getIE(E){

var t=e.offsetTop

var l=e.offsetLeft

while(e=e.offsetParent){

t+=e.offsetTop

l+=e.offsetLeft

}

alert("top="+t+"/nleft="+l)

}

</script>

//VBScript

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

14. 光标是停在文本框文字的最后

function cc()

{

var e = event.srcElement

var r =e.createTextRange()

r.moveStart(`character`,e.value.length)

r.collapse(true)

r.select()

}

</script>

15. 判断上一页的来源

javascript:

document.referrer

16. 最小化、最大化、关闭窗口

本例适用于IE

17.屏蔽功能键Shift,Alt,Ctrl

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"//可以换成ALT CTRL

}

document.onkeydown=look

</script>

18. 网页不会被缓存

或者<META HTTP-EQUIV="expires" CONTENT="0">

19.怎样让表单没有凹凸感？

或

<input type=text style="border-left:noneborder-right:noneborder-top:noneborder-bottom:

1 solid #000000"></textarea>

20.<div><span>&<layer>的区别？

<div>(division)用来定义大段的页面元素，会产生转行

<span>用来定义同一行内的元素，跟<div>的唯一区别是不产生转行

<layer>是ns的标记，ie不支持，相当于<div>

21.让弹出窗口总是在最上面:

22.不要滚动条?

让竖条没有:

</body>

让横条没有:

</body>

两个都去掉？更简单了

</body>

23.怎样去掉图片链接点击后，图片周围的虚线？

24.电子邮件处理提交表单

</form>

25.在打开的子窗口刷新父窗口的代码里如何写？

window.opener.location.reload()

26.如何设定打开页面的大小

打开页面的位置<body onload="top.moveBy(300,200)">

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<style>

body

{background-image:url(logo.gif)background-repeat:no-repeat

background-position:centerbackground-attachment: fixed}

</style>

28. 检查一段字符串是否全由数字组成

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"

alert(checkNum("123214214a1"

// --></script>

29. 获得一个窗口的大小

document.body.clientWidthdocument.body.clientHeight

30. 怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字"

else alert("全是字符"

31.TEXTAREA自适应文字行数的多少

</textarea>

32. 日期减去天数等于第二个日期

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(A)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日"

}

cc("12/23/2002",2)

</script>

33. 选择了哪一个Radio

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>style

<INPUT name="radio1" type="radio" value="barcode">Barcode

</BODY></HTML>

34.脚本永不出错

<!-- Hide

function killErrors() {

return true

}

window.onerror = killErrors

// -->

</SCRIPT>

35.ENTER键可以让光标移到下一个输入框

36. 检测某个网站的链接速度：

把如下代码加入<body>区域中:

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="http://www.njcatv.net/"

autourl[2]="javacool.3322.net"

autourl[3]="http://www.sina.com.cn/"

autourl[4]="http://www.nuaa.edu.cn/"

autourl[5]="http://www.cctv.com/"

function butt(){

document.write("<form name=autof>"

for(var i=1i<autourl.lengthi++)

document.write("<input type=text name=txt"+i+" size=10 value=测试中……>=》<input type=text

name=url"+i+" size=40>=》<input type=button value=GO

onclick=window.open(this.form.url"+i+".value)><br>"

document.write("<input type=submit value=刷新></form>"

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="链接超时"}

else

{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}

b++

}

function run(){for(var i=1i<autourl.lengthi++)document.write("<img

src=http://"+autourl+"/"+Math.random()+" width=1 height=1

onerror=auto(http://"+autourl+"`)>"}

run()</script>

37. 各种样式的光标

auto ：标准光标

default ：标准箭头

hand ：手形光标

wait ：等待光标

text ：I形光标

vertical-text ：水平I形光标

no-drop ：不可拖动光标

not-allowed ：无效光标

help ：?帮助光标

all-scroll ：三角方向标

move ：移动标

crosshair ：十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

38.页面进入和退出的特效

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

这个是页面被载入和调出时的一些特效。Duration表示特效的持续时间，以秒为单位。Transition表示使

用哪种特效，取值为1-23:

0 矩形缩小

1 矩形扩大

2 圆形缩小

3 圆形扩大

4 下到上刷新

5 上到下刷新

6 左到右刷新

7 右到左刷新

8 竖百叶窗

9 横百叶窗

10 错位横百叶窗

11 错位竖百叶窗

12 点扩散

13 左右到中间刷新

14 中间到左右刷新

15 中间到上下

16 上下到中间

17 右下到左上

18 右上到左下

19 左上到右下

20 左下到右上

21 横条

22 竖条

23 以上22种随机选择一种

39.在规定时间内跳转

40.网页是否被检索

其中属性值有以下一些:

属性值为"all": 文件将被检索，且页上链接可被查询；

属性值为"none": 文件不被检索，而且不查询页上的链接；

属性值为"index": 文件将被检索；

属性值为"follow": 查询页上的链接；

属性值为"noindex": 文件不检索，但可被查询链接；

属性值为"nofollow": 文件不被检索，但可查询页上的链接。

41.变换网页的鼠标光标

42.怎样实现在任务栏显示小图标的效果？ (要使用绝对地址)

有些站点，访问时会在地址栏地址前显出小图标，添加到收藏夹后也在收藏栏中显示图标，

这样很好的与其它站点有了区别。

要达到这个效果，先需做出这个图标文件，图像为16*16像素，不要超过16色。文件格式为ico，然后上传至你的网站。

然后，在需要的页面中，加上以下html语句到文件的<head>和</head>之间（假设以上ico文件的地址http://happyisland.126.com/icon.ico）。

如果访问者的浏览器是IE5.0，就不需加任何代码，只要将图标文件上传到网站的根目录下即可。

1,META标签里的代码是什么意思？

<META>是放于<HEAD>与</HEAD>之间的标记.以下是我总结它在网页中最常见的几种。

该网页的关键字，作用于搜索引擎的登录，事实上它在现在的网站中并没什么用。

设定这是 HTML 文件及其编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，或者不设编码也可，纯英文网页建议使用 iso-8859-1。

这只表示该网页由什么编辑器写的。

这行较为实用，能于预定秒数内自动转到指定网址。原代码中 10 表示 10秒。

2，怎么改变滚动条的颜色，只有ie5.5版本以上才能支持。

这是使用CSS语言，在次说明一下，它和我的浏览器版本有一定的关系。

scrollbar-arrow-color：上下按钮上三角箭头的颜色。

scrollbar-base-color：滚动条的基本颜色。

scrollbar-dark-shadow-color：立体滚动条强阴影的颜色

scrollbar-face-color：立体滚动条凸出部分的颜色

scrollbar-highlight-color：滚动条空白部分的颜色

scrollbar-shadow-color立体滚动条阴影的颜色。

scrollbar-track-color:#99CC33

scrollbar-3dlight-color:#A8CBF1

代码如下：

<style>

<!--

BODY {

scrollbar-face-color:#99CC33//(立体滚动条凸出部分的颜色)

scrollbar-highlight-color:#A8CBF1//(滚动条空白部分的颜色)

scrollbar-shadow-color:#A8CBF1//(立体滚动条阴影的颜色)

scrollbar-arrow-color:#FF9966//(上下按钮上三角箭头的颜色)

scrollbar-base-color:#A8CBF1//(滚动条的基本颜色)

scrollbar-darkshadow-color:#A8CBF1//(立体滚动条强阴影的颜色)

scrollbar-track-color:#99CC33

scrollbar-3dlight-color:#A8CBF1

}

-->

</style>

在这我补充几点：

1.让浏览器窗口永远都不出现滚动条。

2，没有水平滚动条

3，没有垂直滚动条

3,如何给图片抖动怎做的.

<!--

var rector=2

var stopit=0

var a=1

var count=0

function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}

function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1||count==100)

return

count++

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}

function stoprattle(which){

stopit=1

count=0

which.style.left=0

which.style.top=0

}

//-->

</SCRIPT>

</style>

4，在DW如何给水平线加颜色。

在DW中没有此项设置，你只能在HTML中加入代码：<hr color=red noshade>按F12的预览在能看到。由于在NC中不支持<hr>的COLOR属性，所以在DW中没有此项设置。

5，如何在网页中实现flash的全屏播放？

只要在调用swf文件的HTML中将WIDTH和HEIGHT的参数设为100％即可，当然也可以在Flash导出HTML文件的设置中进行设置，方法是：打开File菜单；选Publish Settings弹出导出设置对话框；在HTML标签下的Dimensions选项,下拉后选中Percent（百分比）,并在WIDTH 和HEIGHT框中填100.就行了。

6,为什么我在DW中插入的Flash动画缺看不找！

如果你没有正确地安装Dreamweaver和Flash，那么在你预览的时候，Dreamweaver会提示你缺少播放的插件，请你按装InstallAXFlash.exe 并从新启动计算机。现在IE6已经捆绑这个程序。

7，在Flash中，如果屏蔽鼠标右键?FS命令都是什么意思?

fscommand ("fullscreen", "true/false"（全屏设置，TRUE开，FALSE关）

fscommand ("showmenu", "true/false"（右键菜单设置，TRUE显示，FALSE不显示）

fscommand ("allowscale", "true/false"（缩放设置，TRUE自由缩放，FALSE调整画面不影响影片本身的尺寸）

fscommand ("trapallkeys", "true/false"（快捷键设置，TRUE快捷键开，FALSE快捷键关）

fscommand ("exec"（EXE程序调用）

fscommand ("quit"（退出关闭窗口）

8，Flash中什么是隐形按钮。

利用button中的hit帧来制作只有感应区域而完全透明的按钮。

9，如何给Flash动画做链接。

Dreamweaver是不能给Flash制作链接的，只能在Flash中用geturl()加链接，然后再插入Dreamweaver中。

10，DW中的层的技巧。

层是可以嵌套的，我个人给大家一个技巧，在层面板中按住CTRL再拖放层到你想去成为其子层的地方就行了，我认为这是最简单直观的方法了。

11，如何改变鼠标的形状？

在Dreamweaver4中CSS样式面板：

按CTR+SHIFT+E--出现样式表对话框,点击NEW，出现编辑对话框,在左边最后一项extensions-cursor 选择你要改的指针形式就可以了，然后把你要想改变的地方运用样式表，如果整页都有在<body bgcolor="#003063" text="#ffffff" id=all>中加入就行了。

这里选择（文本）作为对象，还可以自己改为其他的，如link等。

x可以等于=hand（手形）、crosshair（十字）、text（文本光标）、wait（顾名思义啦）、default（默认效果）、help（问号）、e-size（向右箭头）、ne-resize（向右上的箭头）、nw-resize（向左上的箭头）、w-resize（向左的箭头）、sw-resize（左下箭头）、s-resize（向下箭头）、se-resize（向右下箭头）、auto（系统自动给出效果）。

12，用CSS做邮票，看看吧！

13，经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，怎么做呢！

这javascript代码即可实现，摘录蓝色论坛。

【1、最基本的弹出窗口代码】

其实代码非常简单：

<!--

window.open (`page.html`)

-->

</SCRIPT>

因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

window.open (`page.html`) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。用单引号和双引号都可以，只是不要混用。

这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body bgcolor="#003063" text="#ffffff" id=all>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

【2、经过设置后的弹出窗口】

下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<!--

window.open (`page.html`, `newwindow`, `height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no`)

//写成一行

-->

</SCRIPT>

参数解释：

<SCRIPT LANGUAGE="javascript">js脚本开始；

window.open 弹出新窗口的命令；

`page.html` 弹出窗口的文件名；

`newwindow` 弹出窗口的名字（不是文件名），非必须，可用空``代替；

height=100 窗口高度；

width=400 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值；

toolbar=no 是否显示工具栏，yes为显示；

menubar，scrollbars 表示菜单栏和滚动栏。

resizable=no 是否允许改变窗口大小，yes为允许；

location=no 是否显示地址栏，yes为允许；

status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

</SCRIPT>js脚本结束

【3、用函数控制弹出窗口】

下面是一个完整的代码。

<html>

<head>

<!--

function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=

no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"

//写成一行

}

//-->

</script>

</head>

…任意的页面内容…

</body>

</html>

这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

怎么调用呢？

方法一：<body onload="openwin()">浏览器读页面时弹出窗口；

方法二：<body onunload="openwin()">浏览器离开页面时弹出窗口；

方法三：用一个连接调用：

<a href="#" onclick="openwin()">打开一个窗口</a>

注意：使用的“#”是虚连接。

方法四：用一个按钮调用：

14，没有用表格写的，让大家随便看看，没什么。

<html>

<head>

<title>江南荷花扇面</title>

<!--

.font1 { font-size: 12pxcolor: #999999text-decoration: none}

a { font-size: 12pxcolor: #999999text-decoration: none}

a:hover { font-size: 12pxcolor: #000000text-decoration: none}

-->

</style>

</head>

<p>盛夏尚涛

<p><a href="index.htm">一夜露痕黄粉香袁运甫 </a>

<p>瑶池昨夜新凉王金岭

<p>一朵白莲随意开吴冠南

<p>新雨迎秋欲满塘齐辛民

<p>十里荷香齐辛民

<p>濯清莲而不妖卢世曙

</div>

</body>

</html>

15,IE6已支持自定义cursor!

语法格式 cursor:url(图标) //cur或是ani文件.

cur就是WINDOWS中的光标(cursor)文件，光标文件与图标（ICON)文件除了文件头有一个位置的值不同外，实际是一样的。

ani是WINDOWS中的动画光标（图标）文件。

<!--

.unnamed1 { cursor:url(arrow2c.cur)}

-->

</style>

16,用marquee做的滚动字幕.这也我刚看到论坛的朋友在问。

语法：

align=# | top | middle| bottom //对齐方式)

BEHAVIOR=ALTERNATE | SCROLL | SLIDE //移动的方式

BGCOLOR=color//底色区域颜色

DIRECTION=DOWN | LEFT | RIGHT | UP //移动的方向

Loop=n //循环次数（默认是循环不止）

Scrolldelay=milliseconds//延时

height=# width=# //区域面积

hspace=# vspace=# //空白区域

scrollamount=# //移动的速度

17，在FLASH5中也存在一些字体，打散后变成一团的事是为什么？有解决的办法吗。

这是大家很常见的问题！可能是对字库支持的不好！我个是做成透明的gif图片格式，然后倒入。

18，flash的网页里“加入收藏夹”功能怎么实现？

在as中加getUrl("java script:window.external.addFavorite(http://skydesigner.51.net`,`我的工作室`)"

19，在Flash中，文本的动态属性和输入属性的区别。

input text在运行时可被用户或程序改变其值。

ynamic text仅允许被程序修改。

20,怎样在IE中调用Dreamweaver进行编辑.

相信很多在使用WinME或Window2000的朋友，会遇见是个问题。很简单，把我们笔记本程序打开，保存为一个 *.reg 文件。双击它将信息添加到注册表即可。

REGEDIT4

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit]

[HKEY_CLASSES_ROOT\.htm\OpenWithList\Dreamweaver\shell\edit\command]

@="\"c:\\Program Files\\Macromedia\\Dreamweaver 4\\dreamweaver.exe\" \"%1\""

21，设置表格虚线。

方法一：作一个1X2的图。半黑半白，再利用表格作成线。

方法二：在css里面设，要IE5。5才支持这种效果。

style="BORDER-LEFT: #000000 1PX DASHEDBORDER-RIGHT: #000000 1PX DASHEDBORDER-TOP: #

websocket是一个浏览器和服务器通信的新的协议，一般而言，浏览器和服务器通信最常用的是http协议，但是http协议是无状态的，每次浏览器请求信息，服务器返回信息后这个浏览器和服务器通信的信道就被关闭了，这样使得服务器如果想主动给浏览器发送信息变得不可能了，服务器推技术在http时代的解决方案一个是客户端去轮询，或是使用comet技术，而websocket则和一般的socket一样，使得浏览器和服务器建立了一个双工的通道。

具体的websocket协议在rfc6455里面有，这里简要说明一下。websocket通信需要先有个握手的过程，使得协议由http转变为webscoket协议，然后浏览器和服务器就可以利用这个socket来通信了。

首先浏览器发送握手信息，要求协议转变为websocket

GET / HTTP/1.1

Host: example.com

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

Origin:

服务器接收到信息后，取得其中的Sec-WebSocket-Key，将他和一个固定的字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11做拼接，得到的字符串先用sha1做一下转换，再用base64转换一下，就得到了回应的字符串，这样服务器端发送回的消息是这样的

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

这样握手就完成了，用python来实现这段握手过程的话就是下面这样。

def handshake(conn):

key =None

data = conn.recv(8192)

if not len(data):

return False

for line in data.split('\r\n\r\n')[0].split('\r\n')[1:]:

k, v = line.split(': ')

if k =='Sec-WebSocket-Key':

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

if not key:

conn.close()

return False

response ='HTTP/1.1 101 Switching Protocols\r\n'\

'Upgrade: websocket\r\n'\

'Connection: Upgrade\r\n'\

'Sec-WebSocket-Accept:'+ key +'\r\n\r\n'

conn.send(response)

return True

握手过程完成之后就是信息传输了，websocket的数据信息格式是这样的。

+-+-+-+-+-------+-+-------------+-------------------------------+

0 1 2 3

0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1

+-+-+-+-+-------+-+-------------+-------------------------------+

|F|R|R|R| opcode|M| Payload len |Extended payload length|

|I|S|S|S| (4) |A| (7) | (16/64) |

|N|V|V|V| |S| | (if payload len==126/127) |

| |1|2|3| |K| | |

+-+-+-+-+-------+-+-------------+ - - - - - - - - - - - - - - - +

| Extended payload length continued, if payload len == 127 |

+ - - - - - - - - - - - - - - - +-------------------------------+

| | Masking-key, if MASK set to 1 |

+-------------------------------+-------------------------------+

| Masking-key (continued) | Payload Data |

+-------------------------------- - - - - - - - - - - - - - - - +

: Payload Data continued ...:

+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +

| Payload Data continued ...|

+---------------------------------------------------------------+

值得注意的是payload len这项，表示数据的长度有多少，如果小于126，那么payload len就是数据的长度，如果是126那么接下来2个字节是数据长度，如果是127表示接下来8个字节是数据长度，然后后面会有四个字节的mask，真实数据要由payload data和mask做异或才能得到，这样就可以得到数据了。发送数据的格式和接受的数据类似，具体细节可以去参考rfc6455，这里就不过多赘述了。

Python的Websocket客户端：Websocket-Client

Websocket-Client 是 Python 上的 Websocket 客户端。它只支持 hybi-13，且所有的 Websocket API 都支持同步。

Installation

This module is tested on Python 2.7 and Python 3.x.

Type "python setup.py install" or "pip install websocket-client" to install.

Caution!

from v0.16.0, we can install by "pip install websocket-client" for python 3.

This module depend on

six

backports.ssl_match_hostname for Python 2.x

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

这里，介绍如何使用 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:

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

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

var con = document.getElementById("con")

(function(){

// 监听运动传感事件，查看是否支持硬件运动

if (window.DeviceMotionEvent) {

window.addEventListener('devicemotion', deviceMotionHandler, false)

} else {

alert("您的设备不支持硬件调用")

}

// 变量初始化

var x = 0,

y = 0,

z = 0,

lastX = 0,

lastY = 0,

lastZ = 0,

curTime = 0,

lastTime = 0,

diffTime = 0,

speed = 0

// 设置一个阀值

var SHAKE_THRESHOLD = 800 // 设定摇晃的阈值为600 运行相应操作

* 功能：测算三个方向重力加速度，达到一定值进行相应操作

* 作者：HTML5学堂、刘国利、陈能堡

function deviceMotionHandler(eventData){

var acceleration = eventData.accelerationIncludingGravity

// 获取当前时间

curTime = new Date().getTime()

// 计算时间差，当这个差值大于一定值执行计算三个方向的速度

if ((curTime - lastTime) > 100) {

// 记录上一次的时间

diffTime = curTime - lastTime

lastTime = curTime

// 获取当前三个方向的值

x = acceleration.x

y = acceleration.y

z = acceleration.z

// 计算速度，为了防止出现负数，进行绝对值

speed = Math.abs((x + y + z - lastX - lastY - lastZ) / diffTime * 8000)

if (speed > SHAKE_THRESHOLD) {

alert("我实现摇一摇了")

}

// 记录上一次三个方向的值

lastX = x

lastY = y

lastZ = z

}

})()

资料来源HTML5学堂。

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：电脑内存占用过高怎么办

# 下一篇：如何在电脑上看电影

推荐阅读

热门文章

最新发布

标签列表

什么地JS?什么是JSP?

给您推荐相同类型的内容：