浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

7 [; O' M, B# b6 n
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
9 E- y' ]' C7 j4 C; B
* u7 k1 I! K2 R1 u- W# v+ d" U! o3 ?9 w" q8 i0 H4 t+ \
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){0 Z- l& R- B+ F: R
; I }, L& ?) Y9 \1 y
//打开
3 { E) O% S$ |- m$ ]$ \1 @1 h
! ^0 R2 ?; G5 H3 m, B$ e1 s2 k
}4 J/ S/ U, Q9 o# W
* p$ K- z% O( B
9 e& ?5 P- P) f0 s
socket.onmessage = function(){
5 ]/ r3 ~; ?0 G9 c/ ?: S+ |
( S5 h* C* t, T. S" J$ A/ j
//在event.data消息数据8 [4 ^9 ~- h) b0 \$ j
2 |* G) m7 F, x3 B# ?2 q
}' {6 }- `) m R
$ L" @: m& U; M M7 i/ ?3 |
socket.onclose = function(){* H; P3 j ^3 m
4 [% m4 Y1 W% B5 _+ m9 m8 a. g
//关闭WebSocket
' q+ k7 E5 y: F$ X
0 w! b1 S( C: i9 R
}
) f" A* Z; K8 C( }, G
) K l" Z6 Z0 M$ u3 g$ V
socket.onerror = function(){4 X1 E7 f' q% n K6 k# e0 A+ P: u
/ L9 `/ a* [* x7 J/ B5 s4 s2 a
//错误触发
$ g- w* e$ N+ W
0 O# }4 v. A* W
}

复制代码

通过套接口发送数据，调用socket.send:

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
d, ~8 F2 z& l" [; z- O
<html>$ F, R# ]+ S/ u& R" k) F* [; A
1 c! {% e: ^- h% ^9 N, O- M7 Y+ |
<head>1 D7 K' H6 R' `" {9 g. f
<meta charset="UTF-8">
8 x1 g2 O( w+ d) Z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
; }! B C# {% K4 v, M$ p4 S
<title>WebSocket</title>& k8 K( J$ n5 Q: _8 R
</head>
( W: M/ \" R1 J: H4 A$ p
9 [; M& z& o8 P
<body>( b: j- H) F1 w8 H& C
</body>0 ]5 p& H3 g# W% |7 Q) y" p
<script>
& M5 [* F/ O4 _$ q* g
var socket;
3 b4 c8 m- Z2 M! w- F0 M
if (window.WebSocket) {+ d# W( ?3 R5 u' E z+ U4 I3 J8 @
socket = new WebSocket("ws://localhost:8080/myapp");
. S# J7 [0 T4 V( S
socket.onmessage = function(event) {
8 L# J3 i( w2 _( v
alert("Received data from websocket: " + event.data);
9 a' E% k1 g w. Q2 Z" |
}
5 W2 I% Z# v1 }6 D! v9 C# i
socket.onopen = function(event) {% Q! z# P! W9 e1 q9 \" \- V
alert("Web Socket opened!");- E* g$ }& ~- ^4 _1 w8 \7 X
};) D3 n0 Y1 k4 R8 H: u
socket.onclose = function(event) {
5 G% [0 u" x# {( u! E
alert("Web Socket closed.");
! c5 _1 Q: ?' l/ Z" D1 \" P
};7 F/ g6 b* r" d0 h9 f& h
} else {/ b1 G2 V7 y, w$ b# i
alert("Your browser does not support Websockets. (Use Chrome)");! |% s0 b) g% T. K9 T
}
! Q" O6 @% s6 K' H0 }+ @4 X
) R4 v' [& A: S1 ^2 R
function send(message) {
( F9 p1 A9 B4 J/ [
if (!window.WebSocket) {0 p5 E, J4 w' {# U1 d, `
return;9 D4 Q3 q' A" z5 S! \
}8 o0 D8 {7 g- G9 p' ?$ q
if (socket.readyState == WebSocket.OPEN) {
$ e9 h0 U. _. D( E5 d2 ?
socket.send(message);
0 N9 J$ D4 h/ @+ H+ A: J, u+ R
} else {+ Z5 i2 c1 Y0 e% s t' W9 _! A
alert("The socket is not open.");
! y; Z& m2 [$ ~1 F4 [% O% }
}! j+ D$ _& m: H) @
}2 Q ?2 p2 O( H7 t7 w& `9 C$ |
</script>9 U2 T+ e) {' t' {
( S) q& V" ^9 S: K [ s. X
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

[php学习资料] 浏览器使用WebSocket实时通讯