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>);  
复制代码


: \, Z; \" }# K) p, @与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
5 w/ P# _+ L8 A
3 L9 h# |( r8 L6 V/ U- F  w
  n: ?, p: ]6 [. p" {该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){9 K* A% Y; x% V8 m: m8 y

  2. # B9 ]( ~% m% }6 s* o% [
  3.         //打开
    ; j5 ]$ V0 M2 I4 J7 {  X
  4. . a5 p% g" y4 T# K: {* v6 t
  5.     }
    + X6 S1 q! Y, I8 K
  6. 7 Y& Y5 Q2 L# E  B/ S. Q8 [2 I6 Q! c% a, l
  7. , U9 g5 @$ S4 D6 M# @
  8.     socket.onmessage = function(){! r% Z( T8 C' {0 B7 o

  9. ) i2 b6 l8 ~3 M4 c
  10.         //在event.data消息数据: L9 f1 h6 ]5 `9 c8 i, z

  11. ( R3 u; O" N, F5 g* `1 r% z4 j
  12.     }3 O& G: ^# Z0 z  R/ f7 ~

  13. 8 A. y; b" Y, |
  14.     socket.onclose = function(){
    0 j# w( o; i+ D$ X9 X( D
  15. 4 _9 x) g; V# o
  16.         //关闭WebSocket  I4 ~" F5 Q3 C( o+ m2 c
  17. / Q$ n7 @  X  k+ v  t4 k  H
  18.     }: L6 }$ b; [, N+ L+ x4 |

  19. ( V5 C( Q- t1 j# V, B8 i
  20.     socket.onerror = function(){. x$ e+ S; J3 m8 k4 \7 t

  21. ; u6 x; x# D' [  w; o
  22.         //错误触发3 h: c* x4 w" ?7 ]
  23. * ~0 u  U3 u0 F! D0 q( h$ U
  24.     }
复制代码

# H8 n0 q4 \/ {2 b$ ^

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

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

2 l3 `2 I4 F% c
& M. N9 n, z- D

代码附上：

  1. <!DOCTYPE html>7 e2 }+ ~/ F4 [& V
  2. <html>
    # V2 ?. }) w4 B  l" U
  3.   f, E* z& B' j: L1 H. b
  4.     <head>
    * C  X5 A: v  d9 Q+ X9 U) r
  5.         <meta charset="UTF-8">2 n) F$ z* N& o6 D. m6 s2 N/ E
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    ' q2 ?( k* r8 P+ Y/ Y  ~
  7.         <title>WebSocket</title># u5 L& F% N9 Z
  8.     </head>/ B% _& F1 o( Y' c) g

  9. + Q, M7 r  p/ {& C* S; s; \3 F
  10.     <body>
    # ]3 L) s1 P1 S" F
  11.     </body>6 \( U. }" {' V+ b
  12.     <script>
    5 `( T, L9 `9 J3 y8 f+ J
  13.         var socket;
    ; C+ l. E& @$ D; K) Y4 [$ W
  14.         if (window.WebSocket) {
    8 O0 J2 \$ r0 O
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    , d7 ]" A+ e! E  a  c7 e3 V
  16.             socket.onmessage = function(event) {. v  ^5 O/ `/ b) i
  17.                 alert("Received data from websocket: " + event.data);1 L* g6 [' C) E4 t
  18.             }% A4 o* j6 F8 j; d2 `/ F
  19.             socket.onopen = function(event) {0 J; ~$ R% C4 G4 u( c0 l6 v: F
  20.                 alert("Web Socket opened!");8 J0 ]' l% B+ s4 S; @% w
  21.             };8 v3 a* Q* x! S* J7 @! `# N; [
  22.             socket.onclose = function(event) {
    1 o. p5 v) E: _! ?! Y& `, b; D
  23.                 alert("Web Socket closed.");
    * g- Y0 N* u6 }) s
  24.             };3 o! E; ?4 Z! P- p! P/ L
  25.         } else {- |% q' F( c8 H
  26.             alert("Your browser does not support Websockets. (Use Chrome)");0 w2 @( g& ^9 q; C
  27.         }
      u2 x& k2 {/ v

  28. : A( j) ]% _1 o7 ]2 V. H
  29.         function send(message) {. [+ p& s; o& z, n
  30.             if (!window.WebSocket) {
    4 w* e( M/ t. o6 Z
  31.                 return;
    2 g- ?1 M& Y! D0 c2 b1 H# [+ |. l
  32.             }2 _, F4 u# r3 F6 Y( T3 E  |5 \* ]
  33.             if (socket.readyState == WebSocket.OPEN) {4 l7 a; x6 U  X/ W
  34.                 socket.send(message);: ~& T' N" ~4 {* S% n7 o: y' u
  35.             } else {
    ! Z& e3 K7 {1 ?" }
  36.                 alert("The socket is not open.");
    + Z! t" `# J  m0 O2 [4 n& G
  37.             }& R5 d. k4 B6 x5 L
  38.         }" H1 K- o/ M4 A" o+ A
  39.     </script>9 L; n$ ~) f6 e5 H4 z

  40. & ^  N& [! r6 W# ?  g- t6 S
  41. </html>
复制代码

% b% m+ J4 J/ }( Q& h9 P
" j$ @" h. F* b



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