浏览器使用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:// 前缀。
- _' k) I% ^7 F8 I; A% m& u# c, Q8 _( |; ?$ S' y1 }5 J

2 l3 p, X* U S# f" ?该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
, |' s, a+ ~; f
}" ?, m7 [; P4 t! s* y# G1 V1 w
# P) B8 g8 c9 [4 ]) G4 Z- c8 e, _
socket.onmessage = function(){
- a. T7 o$ i8 c2 n) S
//在event.data消息数据
7 a# p# h* ]$ q3 R R* [+ p5 [
}
* l( A# V" l# h. N" ?! T7 F
' H; S( A3 U& y3 R3 u
socket.onclose = function(){2 m9 k; g9 A4 i
//关闭WebSocket h3 r5 x6 ?: l
}: E# o8 m5 ], E: G! Z
& U C s9 L. U: H
socket.onerror = function(){3 Z! w9 A5 j% C% M/ ]6 _
//错误触发
+ X0 Q* x. i L% a
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
/ G4 ? G4 d) c$ ]5 G
<head>
" ]* Y" I" q+ B4 z2 g- ?
<meta charset="UTF-8">
* E7 |5 N" n. h8 b3 L: {% g
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
" U# s8 c: F- E% c5 Q8 O1 J
<title>WebSocket</title>% _, q9 I3 @ R. }& [ ^
</head>
' K, m/ \. |9 t1 {% x
<body>
8 k" N* W1 k9 f2 y* [
</body>8 S4 w( r$ D m0 T% q( C: g
<script>8 _# ]$ a6 \2 j; U5 {' j
var socket;( F5 ?3 l. f& _* K& ]
if (window.WebSocket) {
) f) X& ^& X, X$ X% J0 M
socket = new WebSocket("ws://localhost:8080/myapp");
; R- V& m5 _0 G& l: k
socket.onmessage = function(event) {
; B. ^ `: \" X# k4 P: D; n
alert("Received data from websocket: " + event.data);
& D A, @/ ]2 c4 q/ K0 O9 V
}' u S& `$ U2 ~" ^* r
socket.onopen = function(event) {
+ n) ]& b: b2 I0 \
alert("Web Socket opened!");
( w) ^0 u" Y+ S1 Q8 e. {4 B9 g% }
};
8 n. z& x* @. F5 Q+ f' k
socket.onclose = function(event) {# x( e$ N# x, j) I! G% q
alert("Web Socket closed.");
- R* y( g. _- @7 O m6 r H3 V
};
- w/ d+ f3 _2 ^: {+ j& q- |
} else {/ h, G, z0 l& r- @
alert("Your browser does not support Websockets. (Use Chrome)");
5 B5 d% D5 l0 g6 s$ X8 s, E
}9 c9 n* {1 f# D# Y% ~- G
$ }' Y0 ?# e/ A
function send(message) {
/ y9 K3 N' `, _7 C" W( A
if (!window.WebSocket) {5 i, Z a; C Q! }% ]# g5 p$ q
return; \- V( ?" ?- D; c
}
- ^. S+ G* D" K
if (socket.readyState == WebSocket.OPEN) {$ m; Q( a2 h- f# n3 F7 Q
socket.send(message);
3 M0 U7 M- Z, Q; I8 ~- f3 e+ Q. d
} else {
! ]+ A) w4 z4 ]
alert("The socket is not open.");
, Q3 i6 Z2 `* ]7 z
}
4 C( m. Y8 }/ P1 d5 F
}4 j! I4 B) b$ U/ ^9 b
</script>
# n0 `5 {0 o3 ]- i0 [9 H
</html>

复制代码

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

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