浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
- \$ \# s' p T: d! [6 Z( ^! ~) {# z" L

. m& R5 F3 b+ R. D该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
7 g8 c7 [( k- z2 a! g: j$ ?, q
}
1 Y' ]$ v- l) h
1 S) C* k W) G0 p d
socket.onmessage = function(){
, q( o, [) K0 ~# o \5 G+ Z
//在event.data消息数据9 Z7 V" L. x8 Z% ?3 P. o6 o, d5 n
}7 V6 S0 `) e& y' x& R
) p9 K# W6 |* @
socket.onclose = function(){$ t8 a3 L- N, i5 ?8 L3 Q+ j0 _
//关闭WebSocket
1 E6 N+ I K/ F( Q( O6 w9 a( i
}
& y) w+ n& K" Y
1 f' u$ {3 I+ q, L9 o% p' K& ]
socket.onerror = function(){
1 l, d! r+ E5 P1 Q8 O% r
//错误触发 q2 J7 ?! [1 X
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>( O9 s* u9 z6 s$ C
<head>% S5 i7 c3 }4 v" f' ^
<meta charset="UTF-8">
2 i( p$ S1 ^' y9 k5 y# X/ E W
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">" T( m# g0 k" A- e. j5 D& N
<title>WebSocket</title>
- i; f. s4 ]' ]9 u) K
</head>3 @* F% }/ c! F
<body>7 A0 \1 A; K& G, c0 \6 V
</body>
% c8 J9 X F0 z S0 k# U; W
<script>7 p! L) f- o. M2 C/ D' l
var socket;
0 R( P+ {1 }8 g, b$ X
if (window.WebSocket) {+ O# H9 J7 B, N+ r2 S. _- T5 x
socket = new WebSocket("ws://localhost:8080/myapp");/ ?( w+ M2 A% r6 ]
socket.onmessage = function(event) {
4 l) R9 D* }* [* u: p9 W5 E4 c
alert("Received data from websocket: " + event.data);
" P$ F4 u: l" `, E! \% z
}
/ l& r% W" B/ K% }3 }$ o3 R9 `
socket.onopen = function(event) {. Q7 o# u [2 P0 T. T U
alert("Web Socket opened!");2 _- m. l4 h0 u) P. S) ^/ j
};' F( R2 H3 S4 f) b
socket.onclose = function(event) {
, ^+ I$ y; \ V! W- c- T
alert("Web Socket closed.");
- n1 f( a+ ?! g1 }# E+ p( V
};
! Y9 _7 K& |0 D+ ?1 b' H
} else {
' |2 m' s/ X8 u. f
alert("Your browser does not support Websockets. (Use Chrome)");
3 S& A. u6 K0 @( u" r
}; _7 L1 p2 j" g) a
g. z/ k$ K4 {
function send(message) {
7 m. _' I+ W7 h, Y" O0 _
if (!window.WebSocket) {" f! w0 E# ~/ b$ w/ g
return;
4 h. \; |, N+ ^* D: l2 v3 s
}6 `4 _: p6 J/ x1 y( N4 v" J& c
if (socket.readyState == WebSocket.OPEN) {
4 m: s6 f! C+ x: e; J
socket.send(message);- |6 t% |* R( Q: o; Y( e/ }: b
} else {- Y0 b+ d$ U1 k6 i
alert("The socket is not open.");
$ i, Q. G+ j- t! {+ N2 _+ Z
}! g6 P8 [2 |. ~. t! f% ]2 I
}# r) {/ F- C% O! M1 H* g z! `1 s
</script>9 _7 f2 r$ x: R
</html>

复制代码

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

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