浏览器使用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 z/ \5 m: _" x
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 $ v. U4 o$ ]* |0 z

/ h q% P2 a g( R- b9 e" r% j- Z1 l0 s
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){! C9 n- }4 o1 J# U9 Z$ F
n& F9 P0 ]8 I C5 a* D# V; X
//打开
5 D, H# w7 G. u+ A1 ~
% ?4 A) d$ l& {- o7 Y) Q$ ^: Y
}
- ^4 w& Y W9 _* p6 S# [' a
0 l5 [& d: K* c1 {; q$ Y) Z
* i$ t# Z9 G9 Y: d$ }# k8 E- F
socket.onmessage = function(){9 d2 n$ u5 T- y* l$ i4 c5 C2 ~
* L# @* _7 [6 H$ p& d7 J
//在event.data消息数据
l' r+ I/ _' q( p# o
. ]& {7 g; A5 N# P3 X
} I7 J" K+ x) T- n0 K
; C- M& _+ K0 |7 _( F9 R; f6 S
socket.onclose = function(){4 D j: z b: B2 x
; v( `0 }1 X0 E/ K6 Q
//关闭WebSocket
) R! j5 P( ?8 j1 c# m1 B
* M% `7 D0 i$ C7 P' b! X4 U k
}
. c6 P$ \. R/ W1 X2 ^/ v
/ x I7 P* O: m$ U% v
socket.onerror = function(){( s: s- f! a! Z k4 Z
2 A5 y1 O. \9 d# u. `
//错误触发
% v6 w. m9 y0 N. I, B$ ^+ w2 I
2 x; t) v" I$ t3 U
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>; n3 |. o1 ]/ S1 {' }
<html>
( ^2 Y( @1 k: u
2 A" d. h ~, V; p
<head>( P, Q/ e4 a% B- L
<meta charset="UTF-8">1 b9 i O8 p6 U4 Z- y8 P
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
& Z# Y5 q3 ?" o' b1 S5 R
<title>WebSocket</title>- G) g& O/ M+ S4 r2 g: Z' \
</head>" D; \" u8 l! B5 J \2 i
2 f1 | z0 P# t+ A5 H7 ^# T5 b
<body>6 Y1 U9 L# f2 D/ @1 b1 `( F
</body>
( T- `( f3 L( ~- F8 h; C+ I( l3 y( T
<script>2 s J( T, @+ j* Y$ J
var socket;7 S, d1 g3 @4 V& `/ Y5 x$ P n
if (window.WebSocket) {; \1 f* [! s( h
socket = new WebSocket("ws://localhost:8080/myapp");, @2 h6 m- ^2 r8 }8 T" s7 Q. G
socket.onmessage = function(event) {0 S6 w( f$ L/ v: v* m1 I
alert("Received data from websocket: " + event.data);
7 T0 ^* x6 [% H8 Z
}+ G6 g0 M% ]: S! r+ k
socket.onopen = function(event) {
9 _6 `# C Y2 v7 L/ B
alert("Web Socket opened!");
" u5 l' P0 F4 o/ b( ?, ~- }
};
5 T- |0 k6 K I1 n& e: l
socket.onclose = function(event) {/ z+ F7 y$ G1 ?. `( `7 K
alert("Web Socket closed.");
3 D' k% G: u }9 L
};
& E5 i; [0 q7 D0 y$ f1 N
} else {. e1 y& B9 S" D/ J& x$ X% t j2 k
alert("Your browser does not support Websockets. (Use Chrome)");
. X0 `: _ Q- o' C( c0 {
}
( C; E- _+ E4 t0 v$ |1 H
* P) a1 ?7 q4 ]
function send(message) {
l: G" F1 d8 d; H+ O+ m
if (!window.WebSocket) {! X2 e k& p1 N* J" {8 S" ?
return;$ v: \& u1 A9 c0 { N# K
}
( _9 w i5 C7 r- x1 n6 b6 e) _) |
if (socket.readyState == WebSocket.OPEN) {* N, E& O1 X4 y! r/ n o% [
socket.send(message);
' r9 b- c' ]' b4 @9 k6 O
} else {
$ m* M( O. O( W7 D1 Y
alert("The socket is not open.");
1 T3 q9 v6 T3 P# }, |. E9 ]# n5 F
}
' y5 N0 Q7 s8 k [+ e; t& O# f
}* h: F- H( E i' G3 p3 y
</script>. P: ]2 k0 `3 J9 o
* ?5 Z2 u2 x, p) M' C8 c
</html>

复制代码

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

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

浏览过的版块