浏览器使用WebSocket实时通讯

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

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

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

复制代码

2 i+ @, T1 S( Z) M
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 1 h* L0 y8 ~' o" ]# Q

* }) C* g' y* m2 p8 \1 w& g( J
! w. t7 X ]( ]该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
$ {2 h$ l# U& h6 ~
3 m( W; S% h- J) @
//打开8 L7 m/ i0 T7 f* E% V2 N$ m
- a' A; b( q+ p2 r' E- Z
}( O9 V2 G/ V% v* W- J5 X7 Y& e. E% ]
, b: z2 t# B2 m. D; O
, f9 }1 z8 q0 T$ M* a4 W0 p4 O9 S
socket.onmessage = function(){
9 E3 n0 {' R. t) H8 J6 v& u
+ x: m$ T& {4 R5 M. r+ J
//在event.data消息数据
- C$ A' Z0 j- j( G: u' E
0 E: p i- d. p! U* d: J6 J
}) }$ l3 k% [1 [
! h- U+ f. h7 R/ ?5 v$ R8 x
socket.onclose = function(){
3 v3 f6 F, _6 `% B% P8 ?. p
4 w1 r; w: f3 R) H
//关闭WebSocket' d2 G! z) ^2 _4 W6 G& g
( S) Z) }1 O1 F* {4 M7 s
}
5 T6 l- S8 Y2 l' k# I( s" b0 u* J t
" V S- d$ Y& d
socket.onerror = function(){% w% @. {$ }( C5 k& b4 }
% v' m6 c) Y- ~9 A* E6 I
//错误触发# K- j8 N! }; T/ @% q9 _5 c* {
) ^* @ S8 z {" H
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
% d% c( O. d' O& E( Q0 s
<html>
3 B* E3 H5 [9 E! _$ r
& G: u8 J# b; ^( \1 ~$ p/ Z
<head>: l1 J0 ]; C1 B% M& ?$ P, s+ g; p
<meta charset="UTF-8">8 c5 l/ B. j- a
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
7 z' l" F( ~& A# H0 c
<title>WebSocket</title>! K9 g: i, a/ T, X
</head>' \. O% V! \" C/ u
/ M" m5 {6 @. @* r X4 k
<body>
; R7 n! M' R7 [3 u
</body>
- h* v- F) ~, f4 I
<script>
0 |- ]; C1 e3 ^6 ]
var socket;
) s1 P4 x8 a8 `& W4 h& y& i
if (window.WebSocket) {2 L. f: O. w. \
socket = new WebSocket("ws://localhost:8080/myapp");
* a2 H9 l; S8 N
socket.onmessage = function(event) {" H. A4 h1 s& x1 h. L8 Z! |
alert("Received data from websocket: " + event.data);
m1 a1 u- T r/ B3 ~! Q2 R# V
}
9 M' H8 Q* r) e- i( ~! V; h5 R) ~
socket.onopen = function(event) {
* h8 w2 p+ h9 O" _
alert("Web Socket opened!");
) B: R- `. Z5 G' C; B3 |8 T
};
5 {1 Y. ^' Y1 v2 h
socket.onclose = function(event) {
* s7 X. n: s0 z8 `
alert("Web Socket closed.");% _! K7 N/ u/ Z8 j% h0 r
};
A' Z- V2 }1 L6 x
} else {
. D- U+ h9 Q; [ `. ]. ]
alert("Your browser does not support Websockets. (Use Chrome)");; ?$ V! e. D; r: V6 ?
}+ R8 m# |: Z/ Z* t; u' O
7 }; }0 a: P x; X- n; A
function send(message) {6 s6 u$ y: C8 N8 k+ b7 c
if (!window.WebSocket) {- R$ b' ~, P" @
return;5 ^/ K" u; P3 [, }
}
) P# s! D- u4 w2 Q
if (socket.readyState == WebSocket.OPEN) {# ~8 N+ |6 v0 f/ J/ q
socket.send(message);* ~1 I4 K! t7 s1 R
} else {
5 r% F! y: |& D- n
alert("The socket is not open.");
% ~$ n) w2 J E6 @7 G
}8 A/ x( n& g- r+ s9 O
}" g9 ]: e; r2 X/ _9 H+ N
</script>
0 X% _8 L" T9 ~' S( U& U
' { h5 T. Q1 q6 Y6 v: _
</html>

复制代码

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

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

浏览过的版块