浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
7 M1 ^: J+ g% [0 {" {
: N; Q6 `2 R( ~9 s7 v# j( o9 C
1 \7 c& v; ?) K8 F& m( f* U该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
! B- G) l% i: j$ ]1 W+ I, S; d
}' Q5 Q# O& E. r. Q; j
; L3 \4 k# R- T4 v
socket.onmessage = function(){
' O- W+ S' b4 B# s ]% M& g
//在event.data消息数据+ q/ r; h) H$ b9 y! j
}/ m% e& f. j$ E/ g- ^
( o- L- M3 T6 |
socket.onclose = function(){5 y- @7 q' N& r2 f) y( h" b, ~
//关闭WebSocket
1 B+ Y4 t& C Y' _/ c/ f, K
}
[* d8 K+ y% @1 k9 i# a
- V3 [- f U: ^; K% u2 w! E
socket.onerror = function(){
* G5 x$ E) m4 f6 g5 m" L0 A# V
//错误触发
0 ]6 o' Q' t7 @7 t+ o
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>& Q; A( R! }4 Z# g; V _
<head>
" \1 `/ Y4 s& Y- b' O. }3 {. X
<meta charset="UTF-8">
: N& A/ }0 E- @8 o! `; p3 ^
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">0 M, [" x) a. o6 x4 ~' A& |
<title>WebSocket</title>0 I' m; s# J3 G1 S
</head>
+ A* X, o( C5 ~- ^
<body>
6 ^6 h6 E: S& [6 \( U, {: e
</body>% n8 V; d6 p8 a$ K3 _+ q/ M0 s2 l
<script>! @! p8 `& |6 h G' n# R9 r; q
var socket;
$ ?9 ]) C6 h+ e- K1 Y
if (window.WebSocket) {7 M1 x- ~1 x ?% E5 ]" h5 y( G
socket = new WebSocket("ws://localhost:8080/myapp");
* n6 k0 G; x2 q$ z& V* ?
socket.onmessage = function(event) {; e, L- j% \: i* m, K
alert("Received data from websocket: " + event.data);
( m+ u( l" I, a% H; m9 U% z
}
1 V0 S+ r. j' h) ^- X! V- p0 x
socket.onopen = function(event) {
) a2 \9 x8 ]; ?6 R6 ?
alert("Web Socket opened!");
' B. Y: F7 z2 Z/ I7 J# Z
};% g8 K/ z G- ^( W# ~/ L1 M
socket.onclose = function(event) {
* r$ p, k$ A8 l) y, z
alert("Web Socket closed.");, }9 C4 {, v* \, P0 n/ R& x% Y
};
/ Q B. S% x$ @* h+ H5 i
} else {% y- e! o9 k/ W- U
alert("Your browser does not support Websockets. (Use Chrome)");- K G1 |3 v5 y+ T+ f
}
. e. b7 P5 R: @; [" j9 }" r
. A7 D$ a9 [" @) R
function send(message) {
8 M& f) z9 h# o. T) ~( i( j
if (!window.WebSocket) {
return;$ z" a; H* B/ q0 S! U5 G
}
# m- @. \9 I$ b
if (socket.readyState == WebSocket.OPEN) {
: ]8 t0 C. o4 \- R
socket.send(message);* C. O; ]9 z0 h( }8 T% @
} else {8 L* f9 j( X- w3 m* V. g/ |5 W2 H
alert("The socket is not open.");6 q. x' v6 i2 X) _! P' O
}
+ Q( e" h& ~) ^( o
}, |; l' Z; ? I8 j
</script>
. }: q+ U5 v: k6 ]
</html>

复制代码

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

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