浏览器使用WebSocket实时通讯

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

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

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

复制代码

% Z0 z3 |9 C& F, ^: o
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
4 L X1 x" b4 q( z- J
6 _- G4 l; H2 L: @1 q" P
! \0 `& \: |# [, o' g! k9 `该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){8 L2 X9 J3 g- r+ j) F) H: G0 X+ R
7 Y$ R4 n' W- H# H8 E) n5 ^6 X
//打开
! k8 e' `* C$ \
% |- Q6 ?6 _ G3 I' i
}' v3 ]8 Q) T7 Y7 Y: V3 h
: J8 |" U, F$ ]" z6 b
2 |$ E1 n- K/ \% `, x) t: d
socket.onmessage = function(){
% M* j; _1 O) w+ t. ~3 I3 B3 ^
/ p& Q0 p2 d1 D c
//在event.data消息数据- m( b$ K( n, ] D; {* M
/ }) e1 {: L8 f n5 X# C+ F
}* Z' b: r O& h6 Y& @+ K, H
3 |# u: p7 x! Y9 L
socket.onclose = function(){
o: [$ ?6 e9 o/ R! D
L) l! C4 x/ s) w, b
//关闭WebSocket
# i) u2 a2 j$ j
2 N- D1 D, ?+ e* K. q: A
}3 h6 B e0 x: N: ~
5 O, ]3 y+ G5 _/ s! Z+ U: K5 l
socket.onerror = function(){
# F+ [9 T& D" o0 n6 E, }4 [3 k
, K( | }: u; f6 g. A1 L
//错误触发
4 I, E$ L0 z* C: @5 _
# _0 L) E# P# ~! F5 G
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
0 n! F* Z- O2 B: B* @% y5 z, X
<html>- x) g8 }+ i3 r: d0 q0 Z' C
/ A, M& @* b- `9 [3 _
<head>
# |$ n$ x, k) J% ~' B: T( P' v
<meta charset="UTF-8">
) g7 s$ i7 {7 @4 N; l0 r4 f
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">. q! j, W/ d6 |& r/ m5 K
<title>WebSocket</title>
" B5 R' v) B4 c7 T, d7 H
</head>, o. V5 N3 ?) ]6 k+ k( L- N- w
- {- j. m/ o J* u. a# [
<body>7 O9 `1 \# e, N/ C& _
</body> o- w" j7 s( P' X/ n
<script>9 N0 P0 q0 }: y/ s" c' N
var socket;
5 n5 c3 J. c* @- h/ b
if (window.WebSocket) {: Z/ m0 g9 A, t7 \/ h
socket = new WebSocket("ws://localhost:8080/myapp");( Z8 k" I: |" Z" ^/ v
socket.onmessage = function(event) {
1 ^7 Z- T, |& V* [. k- e7 j+ x' M
alert("Received data from websocket: " + event.data);& v' N! ^4 r4 D, b& n2 J0 J
}
/ X3 C7 X( Y& I) `+ ~- R3 K2 C4 c
socket.onopen = function(event) {1 [9 j( f {0 O' @
alert("Web Socket opened!");
6 c, n8 u6 \0 n( A6 [! G
};
- J, V/ c1 L! R8 q0 Z( w- f
socket.onclose = function(event) {/ c6 `( U* d/ d: K2 D) q) v, B' b
alert("Web Socket closed.");
* `# j3 B$ d- Y( V, B( s
};
: P: ^* c L6 w% L6 {$ Z3 F3 W
} else {2 h# r( j& \2 g2 _- ~
alert("Your browser does not support Websockets. (Use Chrome)");
- @ G+ a) {+ Z/ f
}
z' _5 V. `. g! N7 m+ N9 ^( c
0 r* p7 O# j5 e" G8 }3 E4 t
function send(message) {! h; J# l7 [0 X; c1 w
if (!window.WebSocket) {
( R8 d: G$ P! ?8 P+ z
return;& b$ u* e0 l% D# L3 y) |
}7 w+ p0 w. K% T) c1 D- ^* D4 L7 T: }
if (socket.readyState == WebSocket.OPEN) {
' J( D/ u0 q3 [; a; ~; s5 S* M
socket.send(message);
" u' Z" Z& }* l+ u, L8 M
} else {
9 V! k$ P+ P. A- a
alert("The socket is not open.");
* e- p( M. ]8 \. D: j
}# k0 d; {+ X- L0 y9 g# R
}- b9 p: P3 J5 A `6 T8 Y
</script>
6 |1 H, Q1 e( B, x# f
6 f: t1 w! j& g$ L* B0 d
</html>

复制代码

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

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

浏览过的版块