浏览器使用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:// 前缀。
' p5 Y# c5 b7 g1 P% f9 b9 E: t. ]$ b5 D: G% M; S
8 y+ I: Z2 Z- j. _
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开% ], `/ f6 T$ ]) r) ~! s6 v
}+ n k- z' ?) p: |+ Z. W5 j
; t8 j$ u: M* p6 N; Y$ k6 F
socket.onmessage = function(){
, {3 _ F5 g0 P5 O) |( N: J7 m
//在event.data消息数据
) }; N9 }% Q) Y: C7 n
}
' c1 k8 v# V7 i- {2 `% Q
- K7 m. n/ E2 g- n0 N
socket.onclose = function(){
7 O& Y, O+ A2 }4 l3 G' v
//关闭WebSocket5 K- X) K9 M+ G+ e2 d
}
; y$ ^$ ]5 ]8 s$ ?) h: l
1 x2 |8 v4 z, o r& i5 T7 [/ H
socket.onerror = function(){' K% J2 W$ \$ K4 j" F
//错误触发8 n) n- i* f: d- p' j* e- [9 f, R
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>7 Y* i: X9 a- D9 U0 x- \
<head>
7 e) g3 i$ z! n7 A9 P' C
<meta charset="UTF-8">
* V% U% ]( |: m
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">9 Q2 P5 ?# Q( L- }
<title>WebSocket</title>: n, V6 P- Z( w5 E2 }$ s) G# m
</head>! V6 q% D& H* m. A9 O9 {( d
<body>- B+ _6 ?# r! J3 G
</body>
8 ]/ b0 w' U- o ?
<script>
j# k6 K# R# R& M: v7 I
var socket;
2 _0 D1 x4 E$ q4 c3 \5 d$ m
if (window.WebSocket) {
3 I' k7 h M4 y6 M6 \# z# _
socket = new WebSocket("ws://localhost:8080/myapp");2 z9 s, c5 ^; H ?0 N
socket.onmessage = function(event) {- j2 e; M$ Z; z+ M. }) V& X% W& \( D
alert("Received data from websocket: " + event.data);+ W" e3 f/ c. W6 p5 \: w& n7 @) o1 k X
}3 M) R9 t5 _9 ]& m$ A7 F
socket.onopen = function(event) {- a& L" `1 Z% c/ N8 z. `+ e
alert("Web Socket opened!");% }% ?8 y4 Q. B: g' F
};" c6 {& S1 s; R3 I0 f, J3 Y6 k. ?
socket.onclose = function(event) {( F2 w2 Q, m) R7 D9 j
alert("Web Socket closed.");( p+ N; @/ H. a' z6 w
};
8 J) t5 P2 n3 o/ j
} else {# e8 a5 V) q5 T! d" z
alert("Your browser does not support Websockets. (Use Chrome)");2 G6 [7 b5 N! s* L. O
}
- b. T; }, _7 C* }
- I5 Z% I& ~1 P' q7 z. o: I) e
function send(message) {
8 P$ x" X& G" h9 S
if (!window.WebSocket) {
5 T. v! t# [- ?' d9 q1 q% z* s }
return;
4 I8 p/ b3 c! E* e, @# |+ V
}
1 ]' N! `- G/ a" g; s
if (socket.readyState == WebSocket.OPEN) {4 I3 M% Z. c6 h7 K3 N
socket.send(message);" u- S+ I0 d/ Z% ?; T
} else {# m0 `$ m* f. U! ]& ]) D
alert("The socket is not open.");
/ k+ |8 D7 _) P' d/ Z% A8 E8 s
}
+ |4 i& P8 f+ O/ Y
}. ]' d/ R# x `0 D
</script>
. ?2 f# c0 ` l% q% X) m9 ~6 _
</html>

复制代码

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

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