浏览器使用WebSocket实时通讯

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

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

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

复制代码

) {% z, d. f8 S8 h7 _' X与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 $ @5 {2 g1 K% w7 Q

5 }4 Z7 h8 Y. T [) s5 P
S0 `2 d9 e: t7 p3 m4 C该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){; r2 N: z( h0 k3 L% }! P+ x. x) F
) p7 k% b2 _* }% H* h
//打开
; I! ^/ }; W }+ U: U) k
$ ?( G& V4 M0 Z' _3 {
}
' @) J, U: _8 c5 v; H. d0 c. t
5 l% f0 U1 J4 x/ p3 y( b$ X4 C% A
5 B1 S2 C) M1 }- ~. w$ U+ K# N
socket.onmessage = function(){6 }2 k* F# B& m4 l* d7 X
1 [8 B- w, z7 u( j& W! T$ X
//在event.data消息数据2 A+ p; z5 `' J: o& C( M7 _: t
3 t, {% B' E/ Y
}
T& o4 ^- {; M# C
+ g9 ~ q+ ]5 n% ?! o, H0 m
socket.onclose = function(){
: ], q1 [# k% g, V$ n8 r3 ^* u0 x; F
' A+ k' L: z7 ]! y- J0 w
//关闭WebSocket
6 B, y! a" f. l' V; I, r
0 u$ U1 l" d% R* g: m5 C
}
, R; ]; G0 x6 y
8 E* s$ q: q6 e- X: C% D
socket.onerror = function(){
( f! w% I' N R$ V9 v- H
! R( K6 L- ]1 p. [/ E& o6 `, m
//错误触发
6 X/ W3 H$ I$ ~3 ]4 Y1 {
z Z8 F _- O/ ?) I
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
7 a) ^- O% f- J2 D; T/ G3 q4 i
<html>
3 q' f6 j7 H7 Q" ]& }! V% `6 X3 S
5 l( F6 j" \& @
<head>
) K3 J- z: u# n. U6 P
<meta charset="UTF-8">& N, |) Q+ Q$ {& ?9 q! c( d/ s
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">7 M' ?6 ^- P) A; `
<title>WebSocket</title>& E; ~2 @2 v Q; C0 @7 C8 q( u
</head>, ~2 s3 x. c$ k: A' S/ L+ T% r
3 K( E- S: g7 D, E$ J2 M
<body>) ^4 S% H& W2 a1 L8 |
</body>' i9 y4 C+ |& E: a
<script>$ X* E! @5 T, N0 U
var socket;9 n/ g' F+ s. Q5 w9 `: C
if (window.WebSocket) {: |7 O' ]0 x2 A( b8 X, f
socket = new WebSocket("ws://localhost:8080/myapp");
- o) g. i/ i5 }5 V
socket.onmessage = function(event) {
3 K" |* D- G& w) X. W8 I
alert("Received data from websocket: " + event.data);' o6 j( E/ Z0 @& ]
}) e: ^* L2 t: T2 i8 i
socket.onopen = function(event) {4 w, l: P, j; ]* C
alert("Web Socket opened!");; w' K+ E0 m8 H, z) c2 s' k
};/ y6 t7 \+ b% F9 X
socket.onclose = function(event) {, ]: }" `' O" a: x! Z
alert("Web Socket closed.");& h; [7 ]2 |( k0 ~% @3 |4 \
};
1 i5 o1 w7 u/ D
} else {
" w- u7 S" Q4 R3 S: [
alert("Your browser does not support Websockets. (Use Chrome)");
7 U$ ?3 b; u P% G8 \" X
}
- I6 a* j% i. a7 a/ n5 \
, Y' P' q7 \/ \5 H5 G
function send(message) {9 x+ z7 C- A7 ?' h# D/ C7 X+ r7 Z
if (!window.WebSocket) {1 p0 H0 V1 b2 G$ D7 n
return;
3 r' q( s {. \) D6 U
}( a& U" j1 Q5 a7 V( x* K1 ~6 c7 c
if (socket.readyState == WebSocket.OPEN) {. O' U6 B5 E* C
socket.send(message);
( F8 D( s- n4 D' i. C: n( |; {
} else {
% p; [# `4 z" J( w* e
alert("The socket is not open.");
1 M+ E/ z6 E+ W0 p
}
5 z& U' x) N! P- L* V7 a
}
/ D* ~$ E% Q8 b
</script>7 t$ y' U- T! d5 K
' C4 ]: A) [6 D
</html>

复制代码

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

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

浏览过的版块