浏览器使用WebSocket实时通讯

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

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

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

复制代码

) a3 Z! P k% P( K# ~5 E# X/ `, |
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
# k0 `3 k5 W4 r9 U% m, |& P- B% `4 ]+ K
3 A3 x2 {4 ~6 A
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
1 S* X3 O; t; W' l, P
- T2 @6 t7 P9 v- _* S5 s
//打开
& e# d3 j/ _/ N& l3 H3 M
' h: Y" y' e3 ^8 s7 x5 [- k
}
# M' Z1 c; E/ c J& c+ T
5 O! s l$ ]) f' q: C
/ B/ g6 B4 \. X: i; @ a
socket.onmessage = function(){
% [* a& d, p8 i3 @7 ], H6 E
% [$ v4 f" n( }8 Y, U2 ]; @
//在event.data消息数据 x5 C! a- z y5 x: W
( c% I% u4 J! \* |* T- t5 U, |
}0 `$ n7 l- D- ~9 c4 n. k3 Z3 Y
; u* X: r& f7 _* ^0 Y2 y
socket.onclose = function(){
4 {# f/ T$ m1 S
# x1 ] o x4 O
//关闭WebSocket) p. \6 g+ i/ E" e J3 I3 E
2 T; _# l( A7 S5 g+ ^5 }4 S
}
7 e) _' O6 ?5 R% s7 R7 x0 n
" P! a7 t3 a) r' h
socket.onerror = function(){0 b$ r Z: o" o2 B2 v1 t9 }
; x* n4 l. |+ G2 N
//错误触发6 X& P! e [/ H% o! K4 C
: C$ c! W( [' d/ e$ W0 ?/ U
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>4 v. Q. R) Q: y- w2 p3 b
<html>
, E! f1 H9 ]- d6 h) ?( n
B2 D; `7 I7 M$ S! `1 s
<head>% h4 j6 |. ]- e, E+ ~+ M
<meta charset="UTF-8">
# r- e4 T/ h. d- J8 h3 u
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">6 u2 q$ J5 |3 d" v
<title>WebSocket</title>
. B$ M) ?4 k# I @5 s2 f
</head>
3 i4 `" K( ] @5 l, M6 J+ N
7 k( J/ R3 v2 S. ]4 P7 @
<body>4 x8 r/ @! F- y/ G) g% a
</body>+ F: o$ n) @ K+ Y& b, ?) u
<script>
% W% j( d+ a/ F3 I: V" X/ _
var socket;
: H3 R# @7 F( o9 W7 i! U" B
if (window.WebSocket) {$ I) M# |& e4 |
socket = new WebSocket("ws://localhost:8080/myapp");
/ [5 {/ T/ N) ?
socket.onmessage = function(event) {
6 v3 u/ ^: R9 X: C" J
alert("Received data from websocket: " + event.data);7 a3 {1 z+ X7 R4 l' z3 j. Q& e0 Y8 V
}
+ ~+ i; S+ Y, M& T+ Y
socket.onopen = function(event) {8 e! K e- M; A- ?
alert("Web Socket opened!");
8 Y5 g& U+ U$ E0 l
};# @" Q: V: u, x3 y0 m% T" d# ]4 j$ h
socket.onclose = function(event) {8 W8 z; q! K5 S. l! p5 v/ t4 o; o) [1 h$ Y
alert("Web Socket closed.");
( R- e* } Q0 Z' f. N
};
4 ~0 z( x7 ^: r; J5 k+ G
} else {3 }8 T! P1 }! N6 B$ V8 @* T6 C' R
alert("Your browser does not support Websockets. (Use Chrome)");7 x& {" m& S2 x1 q/ G+ l- t' _
}# L( T. @( p8 e- L* h; a# N/ R
/ d' K% X$ N1 Q# w. k
function send(message) {
4 M, p7 o6 {5 t2 h# C1 G; i+ M/ [
if (!window.WebSocket) {
- ^- i& C& B3 T: ^6 M6 [. Y, i
return;4 T. j: u% ~+ l+ f% u* N
}6 o% }: I' ~' w, U; l+ O
if (socket.readyState == WebSocket.OPEN) {
' Q' G U; s, e) n/ ^4 H
socket.send(message);
) k2 p3 r/ Y( r3 o
} else {. k& q7 M2 }- w1 \1 c1 {
alert("The socket is not open.");4 Y) {! d! R0 L; u5 X
}
/ Q r- a/ j1 i+ i/ ~
}
$ o0 a( s4 [' j7 Z
</script>) k3 P, q& b0 Q j) w) E
k1 g* O# _6 X
</html>

复制代码

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

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