浏览器使用WebSocket实时通讯

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

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

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

复制代码

: M) B l d$ |9 A; ?与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
# G6 p' T/ w# R4 s( K
& r+ K l9 F8 @ O! p4 y% S9 k& ?6 H7 r2 g. u3 h
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
v q! Y: J/ y- |4 s& |/ c
' w: U% T/ c. |7 r4 S
//打开
1 G2 F3 y" U7 O) T
. s# p% h, S" t+ k( }, E
}
& O6 g% y" q5 r" d
% y9 d9 P% k3 m, @. ?) B2 v! y: S; l
+ y* H/ l6 m9 ~) d' v
socket.onmessage = function(){2 j2 X6 M$ @" V9 N$ Q) {* w2 P
% m0 p! k0 R8 Y6 T7 ?2 Z- D' q
//在event.data消息数据
8 U& G4 ~: v1 h) C
% @3 w0 O1 U/ p. N
}
7 r1 x0 G0 N! P9 b' f$ W, G8 ^4 A
P1 L$ k7 C5 F1 R' v
socket.onclose = function(){
9 }4 v5 f& |8 I& [4 c* ^
5 V H' O: Z) S
//关闭WebSocket
) n% U5 p8 t# S
. R: q( w) T a" g, R" m0 B: w
}
1 v5 Q9 R6 ~2 i" r h
( Y% H8 h/ E3 V- x" c& {
socket.onerror = function(){0 m' P! H, G! G/ O7 p7 S* ]
. D: _; g& {% @
//错误触发/ @) ~2 L* z: D
; y& O0 \6 X, z% K/ ?2 E* q% }, K
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
: `4 V2 W& z9 R' W
<html>, |& }8 f+ u _ p9 o
# }( y& \7 g6 B3 e
<head>
5 r$ N; a ]" {* @
<meta charset="UTF-8">5 Y5 r* X- h6 @' V. B& E$ P, Z8 y
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">) c& e8 R( t& m/ S8 q
<title>WebSocket</title>
5 ^; H: S" L0 V7 {
</head>: Z; ?% S1 ~- }1 l, \$ s& _- b* i- }8 f
+ [6 I4 F0 z) i- W% n' ]; k
<body>
, ]) O# S, E: N* g1 F* q
</body>" A/ E( q6 e, [
<script>+ f# X. s, d: |) f, @' }
var socket;
1 ^$ N6 J' t7 y. `. b
if (window.WebSocket) {
9 P3 @/ P! W; Q! q% C+ `& T% L! J( d
socket = new WebSocket("ws://localhost:8080/myapp");4 g3 n& I+ ]7 b, F7 k. ^& O* c
socket.onmessage = function(event) {1 h9 c( H- o, e2 x. v, i: e
alert("Received data from websocket: " + event.data);: f9 Y6 E1 [: E# c, V: B) p
}
) E. L+ P/ A' Q! B0 k0 U
socket.onopen = function(event) {
. i Z/ z* S% ]/ h1 ]. b! ~
alert("Web Socket opened!");
7 b$ w L# c& e9 Y' C8 x
};
2 j, G! T0 T: N( p; p: F
socket.onclose = function(event) {
3 I3 b0 [6 b% R& G4 R3 U" [
alert("Web Socket closed.");( R, P% \% i0 b
};5 E7 V: g1 t# o9 Z$ N' a7 ]* y3 e
} else {- I+ V- t2 r2 _0 j! y# w9 |
alert("Your browser does not support Websockets. (Use Chrome)");4 X4 j; i6 x. l7 B# z
}
6 R2 a% }( U x; f$ Z+ E
7 P# }3 F1 H" B- i% V! f
function send(message) {
; {; `# j7 b, D: j8 C
if (!window.WebSocket) {. k( D. h X% y" C% r7 D
return;
; ^/ ^/ P2 ~/ O: m( s+ j1 G
}4 Y! J% i; l# q2 _. K( [ [8 j5 M
if (socket.readyState == WebSocket.OPEN) {1 E/ J, i! g: q* W- d+ V' V
socket.send(message);
7 L+ x$ i! V! F
} else {8 h# b& l! [3 ?9 y' D
alert("The socket is not open.");
0 k% [ }1 @) P3 i. l
}
/ T: Q" B1 Q4 Y! R7 \* R
}
1 Y b0 a0 [# B& |) W6 t+ v& S
</script>
; V) F* G, W. G( }5 y
& X' s4 e0 J4 W, H$ q
</html>

复制代码

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

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

浏览过的版块