浏览器使用WebSocket实时通讯

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

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

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

复制代码

- p4 t* ^# ?) L4 M" W* p
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 3 C3 p1 [% p; [7 ]$ A- I' x

5 f( I0 W) _8 I. k3 U! y) x. _: [, f+ i3 f5 \3 L3 f
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){3 R8 [) B( ]# t8 K. F4 B
1 o4 v/ j- q& b6 d5 j0 E
//打开. c6 F! V& s, i5 T1 r( d
) j( ~' l/ E+ @) j
}* n1 {5 g: D0 E& d
% R+ X% d' |" w
9 y' p) N$ z* b. a6 h
socket.onmessage = function(){- d" k7 u: A, s- C3 c3 w1 Z
+ F. X5 V7 r4 l6 K3 K% k
//在event.data消息数据% p; d4 ]0 d E+ |+ u
9 t5 y2 t/ X+ v5 e
}
# v9 d4 ~' C; m- m( u6 |' b
2 X# d H( K5 b
socket.onclose = function(){& w& O! L$ U3 x
: h$ K( D& W. N
//关闭WebSocket
. \1 k5 M: c, ?! n8 a5 F% T( N
8 H, y5 | S4 f) {( S9 K
}, v( q) f( Z1 w/ v" Z- I
8 A2 }: \( K }
socket.onerror = function(){
j) N ~& X" `6 B1 ~1 N9 ~
3 l. x# Q: [ K+ Y
//错误触发! h8 b* R4 n( O' _
) E" p7 A% h# w% D0 a
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>5 G7 \- Y' D$ Y9 B' v7 k& O
<html>
! c% U4 `* w3 Q5 [
1 v* l! w3 [( T. }6 c h
<head>
* l3 w. s9 b$ Z3 t+ ^
<meta charset="UTF-8">
7 M+ y4 |/ |9 @" I' Q
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">. J/ M1 n9 ?* `- @$ W# r% I
<title>WebSocket</title>
% R- w! r4 N+ Y( `
</head>
. d: L6 y" n: J; j1 l
, y1 t# `" R1 }( @2 T) N2 z' q/ z
<body>
& n q8 D" }& F* U' s5 z3 L
</body>7 p* W7 `4 [5 M; I+ h* x
<script>
) Z1 U. m8 v% [
var socket;: B5 c6 O; ~9 v) Z' F( Z
if (window.WebSocket) {$ S1 S4 x3 g5 j1 D& H( C! J% z
socket = new WebSocket("ws://localhost:8080/myapp");* Y$ \8 b }* z. Q7 _
socket.onmessage = function(event) {
! C/ k- k7 q$ c5 @, _# C) Y& k
alert("Received data from websocket: " + event.data);
1 @0 O/ C6 e1 Y! K D3 \+ x6 k
}
: u8 r' Y# A" r8 C1 g* ?3 z L+ F
socket.onopen = function(event) {* u+ D& k7 ^. g, j" G; c
alert("Web Socket opened!");# }1 C$ j, `+ l6 i; v% I
};* w0 f1 Q" h7 I
socket.onclose = function(event) {
- R3 ~/ w; `% i1 ]& e5 ^/ {
alert("Web Socket closed.");% I: D, j: B; y6 p* \* }( u
};* y) G& _! d* z' _ W* V
} else {
2 P2 E" B8 I" Y4 m# k. s6 J$ p! y
alert("Your browser does not support Websockets. (Use Chrome)");
2 [, d& t& u( {
}" e4 O. g) W5 n3 Q9 j1 \4 b
l/ s0 C# f! C1 d% Q5 L
function send(message) {
+ v1 T6 c8 ]7 W( Z
if (!window.WebSocket) {- E; E" Q3 Y( x
return;
% B$ y' W- D y; X5 |+ `. j
}9 |5 b Z7 w2 a- q4 ]! @
if (socket.readyState == WebSocket.OPEN) {
- w( X* [( m! Y ]
socket.send(message);
! Q" J, `8 \: e
} else {: Z. f3 `9 |( Y( A& u' r. @0 k
alert("The socket is not open.");
/ k6 F2 V p9 W" C7 {5 h* _& J. F
}
2 S0 m( `- M) o' ^ e( N, ]
}
" X6 r1 J" E8 z7 I
</script>( H7 L; r( n& U7 @6 V
( X. @; X' ?7 k; ~: K9 G" ?9 n2 G
</html>

复制代码

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

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

浏览过的版块