浏览器使用WebSocket实时通讯

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

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

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

复制代码

4 b0 v. z/ B- m5 y
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
, t% j" h3 k2 a7 x; k& s* E$ N9 s V0 h7 \/ [: e
" m" |4 P7 [# {2 `5 j% v \
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){6 ^9 b0 ^" D# D& s2 r* Y1 J
, b7 G6 G& r% [# A; l4 c- A
//打开
) f& |0 g9 w* B8 d1 d' b, a! O
% x# g p" A# E- x) ?& r% i1 ]
}+ v/ Y) F9 m- B) D, ^3 x- C
& s3 H* u- N& G- h4 G4 @) g; o
, g, x) K4 f. |
socket.onmessage = function(){3 w t; J1 K# s9 P2 U* u! j
: K+ D# g! B: ?8 P# u. `# Y4 T
//在event.data消息数据
4 O& G$ N- y% ]9 f1 s
1 H/ ?/ q, Y! `2 y7 t+ s3 ]
}
1 Y: M+ H6 a7 E+ n. i. u# y/ @" R
5 ?) p! `1 m& a; T8 E) C& h# j$ P
socket.onclose = function(){
5 d3 `/ U9 \% Q
0 a* }7 s A% ]% n: s+ o0 c
//关闭WebSocket+ b( t/ @7 Q* D, G* t- k
) Z, Z2 p% _3 I2 P! r
}
7 m- K! h% x- w
/ `6 W' [" ~$ R2 ^/ t, ^0 F8 a
socket.onerror = function(){. s+ V4 s; w+ l, [
* ]; t" y7 M. Y. D
//错误触发0 r' A5 q8 h" r1 ~, p
) A* x8 u4 L9 B* t% P2 v
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
) j# X% u& Y$ y3 Q% e
<html>! [% t8 a1 Y. S0 T: M
5 f. f% B3 H3 U
<head>$ Y# r- G8 P- w; d
<meta charset="UTF-8">; ]4 h' U7 i& ?+ Z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">$ p+ x! w4 x2 [! e: ]
<title>WebSocket</title>
7 f2 B1 M0 C6 V3 l: j
</head> e$ ?& S1 c x8 R6 k5 c! @( z7 W
% h3 p+ A D# G
<body>$ ^0 \! b0 f, M/ |
</body>
# w, T" e! R% d* y, n0 {. P' f& `
<script>
+ R8 B. S4 Q) n5 Y
var socket;
7 T' `7 b; t% W# u& R H
if (window.WebSocket) {8 C# [- q4 h3 b; \5 A+ H
socket = new WebSocket("ws://localhost:8080/myapp");
% x2 W% Z" a1 g. A
socket.onmessage = function(event) {- t. B5 V4 _+ }# a
alert("Received data from websocket: " + event.data);
8 A2 q3 `& [; Y5 L K; H# M/ E
}
+ X G5 U- R; o$ n
socket.onopen = function(event) {
! `1 K- y0 _1 K: m) n4 F. ~, z
alert("Web Socket opened!");
( }. u+ G8 \+ K
};2 a* I( \8 r- ^) ~+ Z* ~
socket.onclose = function(event) {
9 B3 n' [2 u$ r |3 `) z
alert("Web Socket closed.");
$ A9 W* B+ d" f+ A' ^5 G( j4 p
};
[ G. ?% H5 [/ ]. k \
} else {5 z3 z( N0 K! s/ f' L4 J( @8 Z
alert("Your browser does not support Websockets. (Use Chrome)");
0 _: H! t j- S6 |4 T6 @' `
}
0 G8 \& X( j# m9 g3 t% j
/ i" W( o- D, i
function send(message) {, f- d8 y, H9 Q" Q! G3 b q
if (!window.WebSocket) {: b) `5 l$ \9 \* {6 S; E9 t
return;2 d8 _+ |/ h- g0 ^* p: y1 }
}
" |% {& d/ l U% ^' W
if (socket.readyState == WebSocket.OPEN) {* `' }) B/ r8 E9 a
socket.send(message);
0 Y; Q; b8 A x: B4 F
} else {
2 S G3 [2 K; |! s# Z
alert("The socket is not open.");
( D& m. X, U/ ~! t! E
}
- p8 @9 m+ @2 }- l, Z& P: t
}
# c0 e+ I5 q0 E
</script>6 r1 J, o) L/ C% D: o" `- @/ ]5 K4 b0 G
! \. ?4 k# L4 J! i9 Q/ B
</html>

复制代码

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

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