浏览器使用WebSocket实时通讯

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

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

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

复制代码

* r' i# d ]8 o1 _与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
- u% [5 p, v' s7 v) ~$ c; m9 q( v) S7 e5 t2 y
$ a) i& z) e: {+ B# U
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){* |; E \& n& N
1 b9 c+ c: ^% }% Q( q. G
//打开
, X% m0 R7 P; D
. E ?) s9 V6 Y1 G
}: s' H- L1 w/ r
& f+ O# D$ v5 u, S& t1 e4 _, Q
% D; W) p* }& V+ Y6 G* v% |
socket.onmessage = function(){3 c) g0 R- u6 K$ V) Z
( v4 Q, L0 q& h z& P
//在event.data消息数据6 p: w7 I1 p* Y
* E/ E c H5 R; r6 E
}
1 b; e7 d+ s, d) B$ K
4 j5 I( Y2 K) N W
socket.onclose = function(){
q- j! A0 B4 G% _3 Z
4 N% k7 z( S# l+ Q5 w% T) c# q
//关闭WebSocket
' l& ~+ k& X$ v6 n% w/ x7 U
, I( ^2 M! v# }( b
}0 x5 d* i: a% ~/ e
! ^7 o, K0 o% X6 v1 C' I
socket.onerror = function(){& K1 j, `+ o2 S( K) n* a1 f
4 E1 ~: W C0 M0 ?
//错误触发7 O; _* L# R% A" ] e1 r
5 K0 }7 K ?5 w8 O: X0 C4 U# j
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>2 r8 O" i% T0 S$ Q
<html># T: Q1 R# Z2 `3 W( K
3 p' f2 @* h8 }1 \+ F7 T
<head>+ `+ L2 x# s7 ^- f3 |( E( b, X
<meta charset="UTF-8">) k8 K$ Z3 i2 `0 k- f- k! a
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"># u( `% C; j2 y1 v
<title>WebSocket</title>
% N6 ?: ~! o8 h2 j" H
</head>
0 l7 i* i M8 H4 ]1 y& }) }, _
2 z1 _3 a9 _) {; Z
<body>
) ~& M, z3 n* ?% s
</body>/ t* ~* R- I! q" C
<script>
4 t4 ~ x& \) E9 ?6 g$ _' Y. H
var socket;
$ @% I0 g8 d) v; n/ k+ }3 s* o# k* \
if (window.WebSocket) {/ t+ B+ W5 O, d, W) G# ~% X
socket = new WebSocket("ws://localhost:8080/myapp");
, G1 b5 j4 h* }% T2 P
socket.onmessage = function(event) {
2 k. @9 ]6 z( L* U- c
alert("Received data from websocket: " + event.data);
" X. v3 W4 ]& ^' n1 d) [% F
}! Z# n8 ]8 w7 `( \ \
socket.onopen = function(event) {
4 n% G; b% K( a! e4 L9 m( b7 [
alert("Web Socket opened!");
4 X2 t+ t+ s5 L4 Y6 {' ]4 n
};
7 q. p( i! E9 S9 J+ }+ v7 o8 w. x
socket.onclose = function(event) {
( W9 W/ f8 C1 ^; V$ Y* i
alert("Web Socket closed.");' \5 o) G) N6 L
};+ C8 o! V5 D; f/ R
} else {
( k; p. z+ r# [( t
alert("Your browser does not support Websockets. (Use Chrome)");' s' d l# \6 ?
}& k" U& Q/ W% G4 C: O4 t
) [ g( Q- @. @
function send(message) {0 X7 J: _6 y7 K0 J# `2 m t
if (!window.WebSocket) {
1 z* p3 P+ x3 G' f$ s
return;2 n' R0 e" ]% A/ R% f! M( u5 k0 R1 h
}7 {# e; t7 B1 o/ ]& f+ G
if (socket.readyState == WebSocket.OPEN) {
7 W4 ?, @0 h" L8 `6 ^6 x4 U
socket.send(message);
# b4 N; j7 B! A
} else {
3 _# M( f2 A! q, S
alert("The socket is not open.");1 S Z/ L" d7 t* L' p& V! Y
}
2 ~& {7 b( L o4 Z, q7 d
}
( r' K; t/ \% g
</script>. T( y+ E& f9 o$ G
7 p9 Z5 {4 K) Y
</html>

复制代码

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

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