浏览器使用WebSocket实时通讯

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

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

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

复制代码

" a. H0 V7 U2 y5 J: B9 M
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
" D ]2 q! S" y* n
/ V' {! `0 ~2 K2 q9 ^/ ~2 [. T. T
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
0 _- p$ |0 j7 h6 q3 E6 i
' ?! B$ U# t: u" G7 I4 a
//打开& G* H! [! k' ?4 U n
4 g1 I( Y) F9 u6 ^# q' a- j0 O
}
: c. F/ Z: M7 w1 {6 _/ S$ A0 M7 ^
- s0 |+ n' E5 f! x! u9 H) r
2 S4 n" I E7 [. t! D4 b
socket.onmessage = function(){
, Y# q! P3 x f% w4 h6 j# ^
9 O: P1 H! B, O4 Q* @ p4 T
//在event.data消息数据
5 v3 S) S* W, q: H
$ z9 h2 e9 V$ o1 ] D
}; t" s( ~: z4 |
5 e4 y+ n- L" F$ M5 I- t5 V
socket.onclose = function(){ ?+ f6 V) c3 A0 \% w6 I
/ r' {/ \ Z) `5 ^6 [9 y7 Q
//关闭WebSocket
2 f/ ]8 W. @- O0 U; k+ u. t
( Y5 g2 K! ]& Y! n' ]" D e0 k6 l
}3 H9 J. z: R$ i* Z' h" y
1 K$ _4 k* z( ]* w
socket.onerror = function(){
! x4 H* N$ d3 Q/ P/ \# Q% q6 Q
! b% }& q D) l; P6 `0 @
//错误触发) b- S" e% B: D) k) U8 i' ~
( X/ I/ ?1 {: l- {4 G i
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>8 {6 X, Z, H0 |4 ?# S' z
<html>0 u# m% a/ D) o) v5 [! X
! c4 O# B6 n. {8 p* w. n
<head>5 ?; h" R6 D9 r5 G
<meta charset="UTF-8">3 v) d+ [( ]7 _( ~* r; J, p
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
0 c5 z! F' B% ~' [5 r0 l
<title>WebSocket</title>( V0 C8 R) x( ?# _5 U! ]. _( [) D
</head>
" f4 G" p8 i j
@6 |6 H8 U2 n9 W! ~8 ?# i
<body>5 U. p1 G9 j v6 v% x
</body>
" x3 H* ]6 D9 W- a
<script>
# n$ R2 a* D4 V8 y$ l. r/ g
var socket;
- c @' k. Y1 g n7 h# I
if (window.WebSocket) {' s/ e1 ^6 A, L4 l4 y
socket = new WebSocket("ws://localhost:8080/myapp");0 x- s* L4 H6 [, | K6 W* Q
socket.onmessage = function(event) {
) J% ]7 ]: [8 g$ L) O$ D1 p
alert("Received data from websocket: " + event.data);& w; ~3 y9 `# `8 C! p" |" \' X
}7 }+ V6 x. @- V9 q m8 a. Z
socket.onopen = function(event) {- c( d) l4 r- W/ Y' R$ i
alert("Web Socket opened!");# P! v/ D6 H. B8 s2 E4 E8 d
};. D2 S; o) E! |) m+ y
socket.onclose = function(event) { L; X9 K! p' b% {
alert("Web Socket closed.");
: V7 ]8 B( z; f
};
5 w7 J8 B5 E0 L# L) b6 |
} else {, s1 z5 E* l6 J. h: l
alert("Your browser does not support Websockets. (Use Chrome)");
0 U' o! Q ^' e! Z% `6 _# p
}
$ `( G! O2 _+ T6 B1 [% Y* e8 f
% q7 V& Z( V) ? i. h
function send(message) {5 {; f% r, A5 P$ Z1 `4 Q- V
if (!window.WebSocket) {
- W- C% u4 q/ [& d7 V/ i/ q
return;$ T6 H1 |; |# f4 X
}/ l8 t( ^$ E* v% A" j3 c6 s$ l
if (socket.readyState == WebSocket.OPEN) {
9 y! f8 l/ W8 O% N5 J
socket.send(message);" s7 K H: x7 l v7 ]: t- O. }; F
} else {3 z# t* O7 G8 Q3 ~
alert("The socket is not open.");
8 j& D, F! o+ G# R2 P
}6 {) F6 {& m/ a# K3 z& e5 i" y7 j" @
}; @$ R2 }0 U/ V6 ~2 t" G
</script>
- O/ H5 l/ O- J9 m+ Q
5 P A) e6 h" v4 B$ }
</html>

复制代码

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

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