浏览器使用WebSocket实时通讯

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

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

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

复制代码

9 v* `7 h" u0 | U0 e% \与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 1 H# @7 I- u# ^

7 E# T6 \+ O9 M$ \9 z
2 r0 @% A0 v6 T- W2 p3 w( ]7 U该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
2 J2 g2 E( i! b9 W% p
& t p4 g. W# @& J% @3 t
//打开4 K2 N6 Q; ]& k( r, K1 J$ b4 a
7 w4 g# c" ^4 B- j8 F( |
}
6 E# Z" I* B, S* T2 P ?
8 a2 j* A$ E* \$ l- f
T) x! H6 B* W6 V# }
socket.onmessage = function(){
+ m! W5 a) `4 j U2 h
4 s4 \+ F+ Y, p' S0 ]
//在event.data消息数据
& w% }5 Y! o' w1 z5 ?* Y- q
7 P8 f. b# [2 h; I* k* u d9 I I
}! i. M k9 g2 r ?$ H) k
" N% A$ V- \- n( w4 C6 i. Y' ^, g( C
socket.onclose = function(){' m' i& Q9 Y% p" j
/ R: v; _, o5 r$ r' k5 S- k
//关闭WebSocket
+ I* J9 ]* j" W, E
2 z) l8 `; b! c
}0 d/ H: m* Z. C7 t) w
* s8 [1 d w1 Y; H' ~1 E
socket.onerror = function(){( V0 n+ u R2 n6 E' c( y5 j9 M6 h
, |& j" b2 Y, b; x- N
//错误触发
7 K+ c" S& E! e) D7 w3 V" d; C0 i8 E
6 k( w# k! q6 C! n# s+ J
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>' t ]- z! ~8 |
<html>( F% g8 k' n& x; o5 l7 W; ]
8 r: ]! A( q- B s7 N( O- |( y" [. c* v; K
<head>! {$ u2 B2 d: g
<meta charset="UTF-8">: h0 H7 A% Q/ @6 a7 n+ a
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: y! j. W' e1 k8 U7 c6 V- G/ w
<title>WebSocket</title>
' B5 F- g* Q b- x
</head>
$ C. h3 m$ h! @4 x
6 y$ ]5 k7 V2 B" A
<body>. A6 P+ P$ Z! T8 w* i8 |8 {
</body>
7 V0 W: {( b9 o! u' Y1 {% R
<script>, T+ v p& e0 }; v4 ^- j9 ]
var socket;6 k3 H) q# \, i9 C3 @& [4 K$ U6 K
if (window.WebSocket) {
3 `/ t$ X0 D& ~+ P) i( u7 C5 d9 u) X
socket = new WebSocket("ws://localhost:8080/myapp");4 c9 [# H. e' m9 f9 e% Y
socket.onmessage = function(event) {& `; w' m$ S2 G/ |
alert("Received data from websocket: " + event.data);
$ \9 X6 n8 Y* X2 [2 p! I% D
}: y: i3 D$ t& ^3 P* N6 Y
socket.onopen = function(event) {
* H$ {- n% G u1 c3 v |
alert("Web Socket opened!");
( P) i7 Z" W& y% G+ K
};% t- c. d/ T! I
socket.onclose = function(event) {
0 i3 u# _, |2 o( g' Q- Q
alert("Web Socket closed.");
: b5 R0 x# A3 e. y( d
};1 [, R* u1 A! g/ z, F- W5 R" X+ n
} else {
) Z$ f0 a$ r4 `8 Y" h8 K1 C
alert("Your browser does not support Websockets. (Use Chrome)");
4 Z. T' [+ ?+ {
}
( F" P8 S: i: X% l3 H3 Z
1 M) }* m% S& c, g5 }+ L" s6 W5 B, s
function send(message) {
, T2 T" ^2 Q" ^8 F
if (!window.WebSocket) {
" ]! U. s2 u& i) k3 Z6 S, e
return;% G% R: j" K; e9 l2 A
}; o$ j2 s& R6 |
if (socket.readyState == WebSocket.OPEN) {+ Z( F- S: b9 @, F; m! C0 p# \
socket.send(message);
- g# H1 H- F9 \+ Q+ V l
} else {
8 f7 ^8 \8 A/ p. I
alert("The socket is not open.");: a7 ]* G: z# N/ I' V+ F$ f; z
}& b) ^ m2 X& x. p8 T% Y' W
}6 Y9 J- L/ E* ^1 d8 e3 [3 w* w
</script>4 ?( k! b* M ?' _* N
( m" y% s6 H& o$ X8 V+ g0 `
</html>

复制代码

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

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