浏览器使用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:// 前缀。
! I b$ _: U! I! k& S8 b F( d# i8 y) z, B3 b g( H
3 @& `/ K) M* K- R( ~6 t
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开9 K9 N4 M% x5 i; M7 A- h7 a
}# W1 ~6 F9 i2 e3 z
2 u6 ]6 ^3 v* |3 [$ u3 ]2 Y6 O
socket.onmessage = function(){% ?, k* A S2 ^2 R' _8 {' Q# }# s. W( n4 J
//在event.data消息数据
5 D& s9 g7 \! m/ U1 b
}
: K W9 g/ q/ i0 A$ S" c3 J- ^, k
" i, Q H' w0 X: b3 \" @
socket.onclose = function(){
0 X% p3 ~* [( U
//关闭WebSocket8 C" ?5 T9 [6 ]
}
- ^ w) s- R) ~# h3 d
1 ?$ w2 R9 U8 r J# z1 f! G9 D! l
socket.onerror = function(){
9 r1 D+ X3 o7 z8 J& S
//错误触发 g% q$ A& X2 N5 Y6 {+ C
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>% \$ D0 S- @5 G! k
<head>- D6 E2 h- p E& R! U5 G
<meta charset="UTF-8">
/ S3 n1 _; N3 j6 a5 K, n# o0 [
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">0 C4 p8 U' V0 X7 I( O
<title>WebSocket</title>- V( l+ i/ X# |, J- s8 W
</head>7 a- U4 T; Y2 f0 Z& p
<body>
) c5 o5 W' @, A$ a, a- D0 a: M
</body>6 _* q4 l" S2 w
<script>& \3 U2 x* Z* a. P% n( ]; U. @. b: h
var socket;
3 N* O6 \ e+ l8 _
if (window.WebSocket) {
8 d8 i* L6 A! [4 ? j
socket = new WebSocket("ws://localhost:8080/myapp");
; M8 V$ a, D1 @: v) p5 n b0 z2 Y
socket.onmessage = function(event) {4 b* k0 C# o) p! ~; d
alert("Received data from websocket: " + event.data);3 B m8 _- A# A
}
0 M% P8 z# ]; o9 d7 h2 g
socket.onopen = function(event) {
# s: o% c3 ?, s, k5 O. y; ?( s
alert("Web Socket opened!");
9 o$ g- b6 F+ x4 s
};
socket.onclose = function(event) {. l% A# B# i0 G: S' L- @8 ]
alert("Web Socket closed."); h; w5 G2 O" z3 h2 B4 m5 A" R
};% o. U, j, O; i0 _- v' w
} else {7 B# g" d) k; L" s. O
alert("Your browser does not support Websockets. (Use Chrome)");
8 R7 D; T: f7 c4 h3 {8 l
}! U8 |5 l- d$ X( t2 y6 p
9 r0 D7 j+ }, @+ r9 G
function send(message) {
6 d- T4 n2 ^2 h" w; p2 L, _) o0 K5 C
if (!window.WebSocket) {5 N- q" @: O% ^- K7 s8 ]. W
return;
9 t; e& |1 A R1 p4 I# ~0 E
}& `% O4 f( l3 g
if (socket.readyState == WebSocket.OPEN) {
5 }0 O( d! v1 Y( j# }
socket.send(message);% S k; ~: y4 z4 J. d1 e
} else {
+ X: W# A" B: `+ K
alert("The socket is not open.");
3 G9 l9 [& l/ D$ X
}! ^3 S( m! o+ T, |" Y* U# P9 O$ a! q
}4 N- t$ N6 ^: a6 Q( h
</script>6 \' E) }7 U; \ t3 O+ N
</html>

复制代码

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

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

浏览过的版块