|
如果你要有一个支持 WebSocket的服务器(Java、Php等),可以在浏览器中使用一个新的WebSocket服务协议,来打开一个链接: - var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");
复制代码 ) b+ m9 |3 d2 U* b* d
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
7 M1 ^: J+ g% [0 {" {
: N; Q6 `2 R( ~9 s7 v# j( o9 C
1 \7 c& v; ?) K8 F& m( f* U该套接口对象有四个用来监听套接口事件的回调: - socket.onopen = function(){ //打开
! B- G) l% i: j$ ]1 W+ I, S; d - }' Q5 Q# O& E. r. Q; j
- ; L3 \4 k# R- T4 v
- socket.onmessage = function(){
' O- W+ S' b4 B# s ]% M& g - //在event.data消息数据+ q/ r; h) H$ b9 y! j
- }/ m% e& f. j$ E/ g- ^
- ( o- L- M3 T6 |
- socket.onclose = function(){5 y- @7 q' N& r2 f) y( h" b, ~
- //关闭WebSocket
1 B+ Y4 t& C Y' _/ c/ f, K - }
[* d8 K+ y% @1 k9 i# a
- V3 [- f U: ^; K% u2 w! E- socket.onerror = function(){
* G5 x$ E) m4 f6 g5 m" L0 A# V - //错误触发
0 ]6 o' Q' t7 @7 t+ o - }
复制代码
" t [4 M( g+ e6 M, E- \. y# F3 X. l
9 M9 H5 q4 s3 P2 ]通过套接口发送数据,调用socket.send:
* {/ l e- @, t7 I3 h d% e% j9 g3 A. U5 f7 g) v# b' c8 G
* f# W8 Y9 X7 k; Q$ h代码附上: - <!DOCTYPE html><html>& Q; A( R! }4 Z# g; V _
- <head>
" \1 `/ Y4 s& Y- b' O. }3 {. X - <meta charset="UTF-8">
: N& A/ }0 E- @8 o! `; p3 ^ - <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">0 M, [" x) a. o6 x4 ~' A& |
- <title>WebSocket</title>0 I' m; s# J3 G1 S
- </head>
+ A* X, o( C5 ~- ^ - <body>
6 ^6 h6 E: S& [6 \( U, {: e - </body>% n8 V; d6 p8 a$ K3 _+ q/ M0 s2 l
- <script>! @! p8 `& |6 h G' n# R9 r; q
- var socket;
$ ?9 ]) C6 h+ e- K1 Y - if (window.WebSocket) {7 M1 x- ~1 x ?% E5 ]" h5 y( G
- socket = new WebSocket("ws://localhost:8080/myapp");
* n6 k0 G; x2 q$ z& V* ? - socket.onmessage = function(event) {; e, L- j% \: i* m, K
- alert("Received data from websocket: " + event.data);
( m+ u( l" I, a% H; m9 U% z - }
1 V0 S+ r. j' h) ^- X! V- p0 x - socket.onopen = function(event) {
) a2 \9 x8 ]; ?6 R6 ? - alert("Web Socket opened!");
' B. Y: F7 z2 Z/ I7 J# Z - };% g8 K/ z G- ^( W# ~/ L1 M
- socket.onclose = function(event) {
* r$ p, k$ A8 l) y, z - alert("Web Socket closed.");, }9 C4 {, v* \, P0 n/ R& x% Y
- };
/ Q B. S% x$ @* h+ H5 i - } else {% y- e! o9 k/ W- U
- alert("Your browser does not support Websockets. (Use Chrome)");- K G1 |3 v5 y+ T+ f
- }
. e. b7 P5 R: @; [" j9 }" r
. A7 D$ a9 [" @) R- function send(message) {
8 M& f) z9 h# o. T) ~( i( j - if (!window.WebSocket) {
_+ o0 S5 [ S* q& @3 e# u; w+ u" [ - return;$ z" a; H* B/ q0 S! U5 G
- }
# m- @. \9 I$ b - if (socket.readyState == WebSocket.OPEN) {
: ]8 t0 C. o4 \- R - socket.send(message);* C. O; ]9 z0 h( }8 T% @
- } else {8 L* f9 j( X- w3 m* V. g/ |5 W2 H
- alert("The socket is not open.");6 q. x' v6 i2 X) _! P' O
- }
+ Q( e" h& ~) ^( o - }, |; l' Z; ? I8 j
- </script>
. }: q+ U5 v: k6 ] - </html>
复制代码
6 B2 r$ v2 q3 L! B
1 {- v# D# ?3 B3 [
U$ p8 E% _6 u. N |