cncml手绘网

标题: 浏览器使用WebSocket实时通讯 [打印本页]
作者: admin    时间: 2018-6-29 14:55
标题: 浏览器使用WebSocket实时通讯

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

  1. <font color="rgb(0, 0, 136)">var</font> socket = <font color="rgb(0, 0, 136)">new</font> WebSocket(<font color="rgb(0, 153, 0)">"ws://172.0.0.1:8080/SpringWebSocketPush/websck"</font>);  
复制代码

8 o- I0 d6 @5 D5 v
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 . R* d: n0 W! A9 n9 @  q4 Q
! A" [& s  u; B2 D& D6 a

1 A7 `! r* Q  F& n$ {" V该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){; B3 K$ Q4 W1 `& b
  2. * }/ l; l% R4 }
  3.         //打开% _7 Y$ N7 m' t- C: z0 z" P" z
  4. 3 _& b" n: ^$ v
  5.     }
    + l8 R' l8 {5 A$ q  z
  6. / @8 r) ~( s0 X* v5 T2 ]8 l

  7.   ^. F8 H$ j" y+ p+ J- ]
  8.     socket.onmessage = function(){. `7 j$ Z3 Q% @8 o3 w  p
  9. & b+ t: W" a' V, I; K
  10.         //在event.data消息数据
    + ]4 {$ D# L0 {5 u1 I/ D" u. T
  11.   D" \/ |7 }* j' q8 k6 I
  12.     }
    4 h( @- g) K5 u6 C2 \
  13. + Y0 V5 E2 |; c9 a+ |, l$ l0 H3 u
  14.     socket.onclose = function(){
    0 U/ d5 g1 u! t' W8 G' `# x$ D

  15. 0 v' j8 r4 \) s+ B/ `
  16.         //关闭WebSocket) ], q9 i; f* {! Q) ?% l
  17. 8 _5 h" x; Q- n
  18.     }% _+ j/ i9 B: J" `

  19. 4 i$ }2 Q) ^! |0 x9 _8 a
  20.     socket.onerror = function(){  ~8 g0 X& j4 ^

  21. : ]* P, W  p$ c5 q5 Q! l7 s
  22.         //错误触发" X- j% }6 w3 E5 n1 x; w
  23. / r% U5 {% U9 M4 Y
  24.     }
复制代码
' _( G( f5 v  ]+ c$ e( ?- R% F

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
( N) C8 o( g1 U

+ S& n, p& e+ }- T) w* ~# t, [2 ?

代码附上：

  1. <!DOCTYPE html>
    5 [# Z$ z' w+ s' F: D0 E
  2. <html>1 T5 r$ v6 s& e" t% A% \- b
  3. : Y7 ]' H+ W/ l
  4.     <head>
    2 e2 m3 z, T: [2 P
  5.         <meta charset="UTF-8">
    " u" J1 {) ]  M6 @( N1 F
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">+ X) c7 v. k4 g& [( u
  7.         <title>WebSocket</title>1 k' ]/ i7 f* g+ s" ~
  8.     </head>) [2 ?. v) M& h8 w4 i
  9. 4 {( o# ?" c/ x+ h
  10.     <body>
    1 |3 e5 @$ O7 ?0 H
  11.     </body>
    3 Q! i$ Z$ g7 n( ]6 e
  12.     <script>
    * X* Q3 H$ |& C) k
  13.         var socket;
    % z5 l- m, d" `$ `; y" V) p# b
  14.         if (window.WebSocket) {2 E' s) X; N* A' P( J( C- [, h
  15.             socket = new WebSocket("ws://localhost:8080/myapp");  D( J2 r6 d! \- L: z6 Q7 P
  16.             socket.onmessage = function(event) {& l  k7 T/ O6 a! g! ^  p  m
  17.                 alert("Received data from websocket: " + event.data);
    " p" u$ l; `: `: g1 ]. W! \  T. K
  18.             }7 d7 r) ^7 Q1 Y8 E1 r5 A
  19.             socket.onopen = function(event) {
    . O" O0 I) G* j3 t5 r2 k
  20.                 alert("Web Socket opened!");
    1 d+ y5 l, k2 |4 d" `3 w$ ]1 B
  21.             };- f  f" b0 E8 X/ e7 l2 N# K9 p
  22.             socket.onclose = function(event) {, ~( Z9 [* s- C* n/ z+ m
  23.                 alert("Web Socket closed.");% m& Z; y  r7 g8 |8 A% [
  24.             };
      w  J2 T; |( G9 a' U( i/ v- M
  25.         } else {
    ' ^4 D' @6 E- a/ E5 Y
  26.             alert("Your browser does not support Websockets. (Use Chrome)");
    " i$ N" t; n' ]0 }3 _, u- o
  27.         }
    / [# r  l& N! Y6 [7 @5 ~( _
  28. 6 N) t  ~0 f  N/ ]: i
  29.         function send(message) {" b* J5 ]. |( n: L4 Q
  30.             if (!window.WebSocket) {
    8 S, q; p+ @* V* R* P
  31.                 return;
    3 Y% y! J6 |+ O( U2 b! d- \
  32.             }5 o7 @1 ~3 w: G
  33.             if (socket.readyState == WebSocket.OPEN) {' t4 ~+ a( `! |$ f
  34.                 socket.send(message);
    " C- I$ B6 X; i! F, K% [3 |
  35.             } else {7 D: @$ s6 i- N+ m
  36.                 alert("The socket is not open.");
    $ v9 W: p$ c4 \1 G1 c, i
  37.             }
    + a+ |; ]  i" Z' e
  38.         }/ [/ e  _$ P8 I. M
  39.     </script>$ Q( U) K2 D8 W- v4 Q7 t& d2 K. T) @

  40. " O8 m9 s! P. Q% \& q: X
  41. </html>
复制代码
0 F) C( H  k, R* C+ t
. U: p0 a5 F) t+ e% [5 x. Z; R  ]




欢迎光临 cncml手绘网 (http://www.cncml.com/) Powered by Discuz! X3.2