浏览器使用WebSocket实时通讯

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

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

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

复制代码

6 b# Z9 Y! A; Z2 r9 I- x7 f7 \
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 4 e$ E6 x- h0 W$ z# v. w3 ^- l* I
9 ?" V" t# V. U
4 c k; C1 B% B2 U% N Y9 L
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
' F, v8 }+ R) J0 C
3 c: X8 f! ]+ t/ _$ B/ x
//打开
( s$ g; ]4 G% B3 {7 H
' T4 S% N6 N: J, T5 k$ O
}
9 V t; X* b! x9 h
9 e* p6 f; {) N- t; Z* C$ N: C
: N; W6 A% f4 ]) m: O2 d) H
socket.onmessage = function(){
1 q, _+ z3 K; p( ]9 ]
7 k5 u3 e0 X2 C Z- `3 _
//在event.data消息数据
* H5 _5 k( d8 i, T6 t
3 X* G5 N" h# O$ w8 a# w) y9 U+ d
}
) H8 k9 G) {; _) q' w/ |
+ C4 C+ N- ] x8 v7 d. }- O
socket.onclose = function(){
# j* `+ I: h" Q! U7 C, ~4 W
) ?* X' y/ ?5 f6 w" V( W3 G+ [
//关闭WebSocket% v' U6 o9 [' V% h7 c) E
/ e; ]+ N- |$ `" f
}
7 S0 o9 L; B# r2 X% p
, ^4 g, e. g! j, O! K% K; q
socket.onerror = function(){
' J( k& K- y% a1 ?) W7 i
6 Q2 y/ m3 ]: \4 E/ F& l
//错误触发
8 f# A6 q6 N& i7 {5 b
: B" I' g. I( g7 w' V1 a/ O
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>" R4 T: B3 R8 O: k1 Y- z7 ^
<html>
) y9 U: A+ E* M g P' O* I
7 m# o# a7 z' R C
<head>
3 U+ T+ w$ j/ c6 g h
<meta charset="UTF-8">4 ~9 E- t) M- o, W
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> E7 M5 j/ N2 y+ l& |, \9 [
<title>WebSocket</title>
0 E6 F5 g1 V- }7 G/ K
</head>' Y. T2 l$ h. G
( ?$ v) `5 ~2 X, {, U
<body>9 K1 y3 s6 C' m( y4 ^" _
</body>
9 K, G6 {2 B4 m" U! {% W
<script>2 v+ z2 Y7 Y/ N4 B
var socket;3 a3 I2 s( K; Q( s3 ?
if (window.WebSocket) {
! {6 c5 K2 ^0 j0 Y4 X5 v$ h8 _
socket = new WebSocket("ws://localhost:8080/myapp");
) H- v. \+ Y' H! Y
socket.onmessage = function(event) {4 L# c; f% x# e; t" v& T- a
alert("Received data from websocket: " + event.data);1 @' c/ c! k. {; @
}. x9 H; \5 I0 P! \9 P! [# Y6 W7 k
socket.onopen = function(event) {1 o* K; ?1 r/ F( T9 B4 E
alert("Web Socket opened!");
, T1 R$ O9 `* G! {
};
: ?' v3 g/ r' E) z$ ~
socket.onclose = function(event) {3 u6 I1 V0 i& |, n
alert("Web Socket closed.");
3 p6 F; c9 Z5 g0 b$ I3 r, m8 ^1 s. F
};
- V. Y& e5 W7 U% I
} else {+ n6 @; }9 C+ h" H# A
alert("Your browser does not support Websockets. (Use Chrome)");
}; V! w% H1 {# F L2 X/ `
1 H$ g* C/ g6 Z2 ^2 ]
function send(message) {' y* E5 h1 d; k! y8 E
if (!window.WebSocket) {
& e8 J+ q/ e* o
return;7 Q( m% T/ X3 Q6 ]1 W- ^6 H
}
. f: C$ l) ?" @3 ^$ d9 T/ i% H
if (socket.readyState == WebSocket.OPEN) { f+ l# w, C+ t
socket.send(message);# S5 Y' c" ^0 A7 l( A$ Z8 ^
} else {
' P! _+ |: j, c
alert("The socket is not open.");
+ r3 N8 Q: j1 X1 ~
}
+ a. S$ {0 E* y" `; {- ?- u
}
1 H3 l- l( `) w/ a8 x8 x
</script># x7 w$ ? ~, }
4 |& _: d, U9 }, \5 d
</html>

复制代码

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

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