浏览器使用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 t) ]% h: j2 Q' m0 S# {# h
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ; R5 w5 x) A5 u4 b, ?4 C* B
7 X% K( o, {; `! m0 P

) j+ B9 i! J. d1 P该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){+ c5 E$ i9 v# b- b
- z; H2 N/ }! |! S5 b
//打开
$ l- u4 @. e/ o3 g
0 T3 J/ K' ]8 [' P
}9 |1 p7 I" u3 m& ~
- F/ M' X: W1 E9 i) q( q
1 I, a& K% V' P6 Z- Q1 m* ~4 @# z
socket.onmessage = function(){
. t+ n* Z) C. T) w$ c( p7 r4 i
1 @* g& Z% k: j# E' k4 g; V6 z
//在event.data消息数据
' ?. Z0 S' O9 e8 M I. g) e) z. ~
+ v- H4 \; H# |* S% Q' X k3 S
}
% R) r' {* p6 g( D ]5 O! K7 t* R
' I$ K! w. n- k( I$ v0 C
socket.onclose = function(){3 C: m9 j4 F- U
( f9 j4 y0 l/ R1 l% u4 }
//关闭WebSocket
" u/ ]7 t8 H( f) A8 Y
8 _. d o8 B# G! f: N
}) i+ g2 I' d7 v
" C& t# K1 e' T* h! P
socket.onerror = function(){
4 @! P4 `1 t! U! C |$ O6 t+ v
" v* y- I5 P; m! _: J4 D' X* Y
//错误触发1 f' r: P" M4 w: \' _# r
. l d; K4 s% O3 P. z$ [
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
& G: r$ }' }3 x4 U3 Q: r
<html>
) ]0 I- C' L+ S7 l7 } d& h; t
1 M) |7 h- Y' z+ j0 v
<head>; T- d6 K9 W1 K0 p6 R3 j
<meta charset="UTF-8">
' A4 I/ ?+ d& }% |7 Z4 E
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
# P2 W1 w- v7 Z
<title>WebSocket</title>
+ q0 R+ v0 ], a3 F' G) e7 r+ N/ ^/ G2 @
</head>8 q0 d% f' \: m$ Q. t, c; S
5 f4 j$ l" z& i! W
<body>
$ P" ~0 ^( P4 w: A" R0 W
</body>
1 ]! L6 A4 `. L3 {( k$ ~: f- a
<script># V/ A8 p2 i# K: ^$ n) d' b
var socket;0 x6 o4 k/ B: U, P5 h8 W) V
if (window.WebSocket) {4 h0 ^8 P; u7 `( r8 b( }
socket = new WebSocket("ws://localhost:8080/myapp");
7 E, e! X& F+ ]
socket.onmessage = function(event) {) s2 l, g" t5 N6 T' i
alert("Received data from websocket: " + event.data); j3 y- Y4 J$ s+ a2 R9 ~& N8 V* Y
}
% k2 L& B, J5 ^' r
socket.onopen = function(event) {+ b/ K" ]8 H, D t
alert("Web Socket opened!");, U, d# Q: m1 Z& |- G
};" E+ z* `! s0 J* V+ @
socket.onclose = function(event) {
& f3 C# E$ E' O
alert("Web Socket closed.");8 c* X6 t( R0 e( e
};
$ Z) {2 y' i% ^+ w4 e w
} else {0 V% B$ k' r3 G+ X5 M. P: I
alert("Your browser does not support Websockets. (Use Chrome)");
2 j; w# E/ z) t
}* i* l- n( g& P f; V- ?/ t
/ n3 Y5 N) a) }
function send(message) {
/ w) s4 e/ A" ?0 D# ?* W8 R; O
if (!window.WebSocket) {
s9 }8 h2 @/ a4 [
return;
/ I9 l8 i7 F& R" s0 M& B
}+ z8 h, Y8 R8 |7 b
if (socket.readyState == WebSocket.OPEN) {
, N# Y4 N% u! _! W2 v
socket.send(message);
5 Q8 k/ x5 F! @3 l+ g! V' ?( W
} else {
! L+ R, y: ^1 }
alert("The socket is not open.");
6 S- H7 K5 V0 z1 G6 I" V% {
}- g9 [2 K' N) N3 Z- x8 Z* y
}" T3 m8 Q! A0 G' U. F- S) b
</script>
5 z. b. S& f. p6 M
. h/ r6 [1 ]* N
</html>

复制代码

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

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