浏览器使用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 x! h* k* L. w( x与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 $ `- O5 y- s. x4 [2 _

1 @' ^' m& k1 Q; W$ Q/ O' ~( m4 b5 V) E& Q- G+ o% u* I! @. l( Q
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){" Y5 H3 w% [# ]! z4 z" x0 V
: m x8 J: m& q# ?3 ~" z0 u9 q
//打开
$ k! Z |( T8 x, Q; T0 i
6 w% S! L$ {& G& A, [0 }
}* Y! N Z1 E/ g0 f
+ d. b' ~) v3 b
" t- G# [0 k% J! ]3 Q
socket.onmessage = function(){/ J, \8 W! |0 O" h2 m5 q
8 F5 y0 @! F0 c6 n- t
//在event.data消息数据5 F/ I+ q, r! L" `
8 I2 \* Q6 i5 u" F2 ?+ Y
}9 N* v: G) M1 O/ C8 B2 E7 n/ w: P
, p0 i. p" r" B% a
socket.onclose = function(){
) l$ P, f% l/ r# @0 i" e7 E2 ^
/ X) h! L0 g6 e k' N* ^
//关闭WebSocket7 t0 m' W4 B2 r8 I z# t" D
l. g: }# P h8 p9 x8 w) c
}9 p4 r M7 _' n$ n9 }3 U
socket.onerror = function(){, x; U4 _/ d! \' e {+ k& u: x
) w8 r* F/ `4 X( u' N4 d
//错误触发0 J2 R; f& [' c# u6 C
4 S- h, T% x6 u; m2 {
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
: E1 V8 N' [, y
<html>0 I& Y& D2 Q$ h. l% n. `( ?
+ t9 A j& J3 |4 N
<head>
' X0 K8 B* C+ H
<meta charset="UTF-8">: Y% z. _1 J5 @- @ J0 W6 m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
! J. [! v8 S4 `
<title>WebSocket</title>2 W' j, F: K2 n" Y, V0 ]
</head>
7 V. h+ \& Q; q2 M
8 A6 H! v6 a3 a- D$ d
<body># ^8 E' k# w& G9 ^
</body>
* ^# V9 v) T- m* t- E+ Y+ e, O
<script>& o$ m8 V+ J/ E3 W& M* Q; _
var socket;
3 a9 f" ]6 c+ A8 G" [/ d4 w. f! o1 V- Y
if (window.WebSocket) {
C# N. \8 L) o! X1 L( W! O
socket = new WebSocket("ws://localhost:8080/myapp");
" S+ J* d: ?: T# w# B) L& R
socket.onmessage = function(event) {
$ |) c0 }3 g/ B1 s: S
alert("Received data from websocket: " + event.data);
+ Z6 |9 t+ {- C& c f0 G3 E* W
}! ]1 ?0 t% ?0 r8 G4 d9 l; p
socket.onopen = function(event) {( m8 m( \/ V- q* y9 P( s- D
alert("Web Socket opened!");- ^: e* d9 z: d/ C r
};% [. q; J, N, Z' K, V
socket.onclose = function(event) {8 j! f( n J# Q# J
alert("Web Socket closed.");/ P' E) o7 C8 f( e
};- d3 \, f4 `0 K% Y/ j$ Z* a
} else {# Q3 E( c' V, u
alert("Your browser does not support Websockets. (Use Chrome)");! n6 c m! L; A# r x5 C5 O# Q9 L
}* T6 Z& t6 `( b* W; z7 c3 R
: c; {% t2 ]* ^. w5 o4 m1 r0 V$ D+ L
function send(message) {+ P. M* W. H( t- J! }
if (!window.WebSocket) {
# c% }7 d3 h/ y7 E+ S
return;; X% h( [3 p3 H3 G7 Y( V0 b
}
% E! Z; i! ~/ t7 f
if (socket.readyState == WebSocket.OPEN) {/ e& I& f1 Q" }1 M$ F
socket.send(message);' m7 K/ x+ L4 O6 |* `
} else {
9 W* r0 _2 X. }! y+ I* u7 B- M: B
alert("The socket is not open.");+ O. k, f" y" x4 S% Z
}, ?4 X: B0 Y& M" o# P' ~0 k
}
& b+ F) P+ r) H( f" S* y) a
</script>
1 A8 M0 R! I! _: M0 c/ h
$ N8 d) r: m% T5 {. l
</html>

复制代码

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

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

浏览过的版块