浏览器使用WebSocket实时通讯

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

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

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

复制代码

; y8 S( ]3 v: j$ Z5 t5 h" ^
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
- M, V, h/ ^! h, D$ F* w
8 W- V9 _& X) M; W, d7 p+ M1 _5 P% m' K) p+ D
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){0 F7 z4 y0 v6 R" F8 i2 Y9 E
% ]4 L* ^' w1 E4 O' h1 U
//打开
9 Z; n" S' H! ]- q: n( G9 P7 G
0 [' q$ |6 d, z& ?$ j/ Y7 ~ ]$ M
}
. ~- E2 s: X8 ~- {0 F. _3 I
6 i5 s- r4 z% F" {
; P+ |0 E5 [9 j
socket.onmessage = function(){
( u; `2 V2 ]2 m+ @+ B8 V
f, Y1 b, ^ h. c
//在event.data消息数据
0 l: ]* Y: o ]/ p# [
6 r+ w" O5 B2 G" S
}& y# }3 d$ M! R
7 B% {! Y' h& J x( Z* b
socket.onclose = function(){& ~- L7 U1 E2 \, k1 X8 w
6 u: p3 F6 v' C7 b$ r7 _
//关闭WebSocket
; {4 r, @! Q" I
3 X! ^/ j% m: W, \$ R
}, L& X5 v% d1 E! G, |2 q0 r
- A0 U1 ^1 m* c( z% u3 N8 w
socket.onerror = function(){
! E, o7 C/ Q8 E1 @* c" y
" X! ^! V' c4 \) [4 P
//错误触发5 Z; l3 |( h+ s; i, j* L
9 f1 N5 Q* k6 c$ G2 g( [' u% u' I
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
: L( p5 J: F2 j, s) c
<html>
+ N( C- g( g! z5 k% P$ B
8 B6 D/ ]# R3 s( E K) t% q1 H1 z
<head>0 E% X5 k: r D$ i. N
<meta charset="UTF-8">9 V ~# i: A5 M0 ?% d$ s/ T
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
}; k0 B0 J4 m3 L- L8 v- K
<title>WebSocket</title>) Y1 x* n' |( [7 C
</head>
2 S# b b8 F( a6 x
% D- v) s8 m) H8 i- g
<body>
! Z0 d7 ~# f0 [, Y! D: ]% n% Y
</body>
! j6 C% w: x' ~$ j, A; |7 U% Z
<script>
2 p7 _& n, @) C! r
var socket;
4 g# U% x8 k, m7 z
if (window.WebSocket) {0 w" R2 B) Y7 t' \
socket = new WebSocket("ws://localhost:8080/myapp");
; V* ^+ {8 Y5 D, @4 E* o
socket.onmessage = function(event) {- z4 X( @$ n( j& b
alert("Received data from websocket: " + event.data);
% ~# ~: y; c) G" X8 `
}: e5 b) c: r, i x
socket.onopen = function(event) {( ~* f' h' q, {+ E" `
alert("Web Socket opened!");0 I* ^8 v( c! r
};) O! D" Z+ _) ]$ l4 ` ^1 C4 V7 a
socket.onclose = function(event) {
2 r- ~3 Y# R4 f: y9 a1 P
alert("Web Socket closed.");) W$ W9 ]- T- [" E. q
};
2 F) }5 ^3 F( S+ b9 I
} else {0 G$ }% j7 p0 d$ l- f
alert("Your browser does not support Websockets. (Use Chrome)");7 t0 W2 [7 q! A
}$ n1 d' L% d8 @7 M
+ q6 }: n, U# ?- d( u% o4 S
function send(message) {7 j P1 h G9 i+ X* @. k& R- E, @
if (!window.WebSocket) {( X3 H4 T/ x) J! X& o
return;7 H! {5 Z- c+ s7 p# ]1 ]8 d W( z
}
7 b: q$ u2 d* w+ ~( X8 M& @
if (socket.readyState == WebSocket.OPEN) {
+ v* d& ]5 _/ l! \ e
socket.send(message);( }3 n4 v P+ l
} else {, P8 G, T, `# \9 f% V# Z
alert("The socket is not open.");$ j4 x/ s- _+ Q. ]6 T% G
}* q; r/ @* z- i4 O( [- y% I& f
}9 p' z9 |8 Q8 t. O
</script>0 b" R" }& x2 v$ C; J, x0 x0 V
3 B0 M: @! D+ [ q& S
</html>

复制代码

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

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

浏览过的版块