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


) f! b; y' D1 o) D  w  x1 I与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 " w/ g+ @8 _3 \: Y9 ?7 @
& U' {$ J1 t! c- l& \
3 C+ }1 Y7 a8 \, k3 @7 h
该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){5 y& a$ A. U" D
  2. 7 P' n. ~8 ~. H/ _/ }( c& _3 Z& Z
  3.         //打开' ^8 z# s( n6 }7 e! t0 W2 r7 }
  4. 6 P; ]9 n( D# o: N- F
  5.     }
    4 c7 C2 n2 @" p( d9 \2 @8 R

  6. $ H3 m  [, z4 L( c( d
  7. 9 C. v# p2 K9 \; m; C
  8.     socket.onmessage = function(){' Q' \& z8 g) K* L% ]& D  _
  9. 5 C/ e$ z  ]; `5 `: i4 O" z
  10.         //在event.data消息数据
    1 P2 V! n8 E. `  {2 ?' f+ _* k' D
  11. 3 A; h: J+ p8 p
  12.     }
    - H1 V, z! g* d" P
  13. & E+ m' o! Q# i/ D7 y
  14.     socket.onclose = function(){- `2 G8 u2 b: I3 n9 n- o
  15. ! b; Q# x9 Q7 S
  16.         //关闭WebSocket
    ' L8 \) _% F6 z& |: x

  17.   {% k) D/ A* g( K: Y* f1 E
  18.     }
    " C! Y4 ]% I2 |8 Q+ P

  19. ) \: j: Q+ x8 w: w0 r$ Y8 [: Z+ X$ x
  20.     socket.onerror = function(){
    2 p0 c" F3 ^1 U' Y4 Y

  21. 9 d/ J& S4 g. A. ?+ D
  22.         //错误触发7 O% c( j. P/ ~  O

  23. + ^1 b; m: g; T0 ]
  24.     }
复制代码
( l9 i( i) D$ b" l$ p+ k- R

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
5 J8 K: E, y. N& {
. Y9 {* E6 W( u1 s

代码附上：

  1. <!DOCTYPE html>& B, Q) }6 U4 a' Z$ C7 C+ m/ ~
  2. <html>* N' w* ^& _: h# |# U; P  V
  3. 0 a) C* b. b% U* t5 s; ^
  4.     <head>( `- R! n" c4 [
  5.         <meta charset="UTF-8">$ L, r& J' b5 ~  T7 I1 V& @
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">/ C/ X/ Q2 t; Z; P) J8 V
  7.         <title>WebSocket</title>
    " Y. a$ |8 A% d2 _' }; l6 i
  8.     </head>
    / L$ ~3 ]$ G+ N9 n1 V0 C% R& Y
  9. # Q9 R$ S, a, C5 ?4 F' q. m. U, D
  10.     <body>
    4 |& A% ?: W/ ^; C' o
  11.     </body>
    1 O$ r- E; v2 K& @
  12.     <script>
    ) {# J: \+ O" J
  13.         var socket;. ]+ c$ x% |- J0 G* v
  14.         if (window.WebSocket) {- A* q( i8 N  C4 k- V
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    4 `( @' k( Z; ?
  16.             socket.onmessage = function(event) {
    8 ~! q$ X  L: T1 B" b
  17.                 alert("Received data from websocket: " + event.data);
    8 a+ }, f) H) @  t1 X' |
  18.             }  k& g0 }2 U' Q0 p# @" V, q3 P, O8 q
  19.             socket.onopen = function(event) {
    5 d: d: i" T! Z) @
  20.                 alert("Web Socket opened!");7 ?' R( o; Q9 W. J. f0 v- Q
  21.             };
    " A/ P" j( R) I8 C( x1 }( G+ @
  22.             socket.onclose = function(event) {# E% W3 m2 A! e& G8 f
  23.                 alert("Web Socket closed.");, @( _% F" {& n+ T/ R" [0 [' j* q7 _
  24.             };
    2 J1 u" H" H% D8 y9 L6 U+ p
  25.         } else {( A1 [/ ~- D0 k6 S% h3 |4 u/ N- a1 M
  26.             alert("Your browser does not support Websockets. (Use Chrome)");
    ) d! Q# j/ E' J2 O8 L
  27.         }( F2 u& A: i0 ]
  28. ) j, Y& _6 S( I  [' I
  29.         function send(message) {
    # d6 F- L( l  d( f
  30.             if (!window.WebSocket) {* X, K  ~( e# m+ h
  31.                 return;& y0 [+ V( _4 m3 @, o
  32.             }0 @) ?5 t4 K# Q# x3 E8 Z. a) {, m
  33.             if (socket.readyState == WebSocket.OPEN) {
    , @" [4 J, _9 U! W7 w
  34.                 socket.send(message);
    , D7 o( ], @. A
  35.             } else {
    ' t2 t2 J* w" S; P/ Y& }: X
  36.                 alert("The socket is not open.");
    4 W4 |" s, O; l5 ?
  37.             }
    / _) p5 s! h/ w) H; d& L* U3 ]
  38.         }
    & t# c- Q& w. y! G3 o
  39.     </script>* {% C$ A9 G7 W0 L

  40. ; `9 T; s& N* _" {1 Z
  41. </html>
复制代码
) j2 v2 `, u: s5 k
) F0 ~1 u/ v# H9 _. _/ l




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