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

6 _0 D- U7 Z& G3 C% ?1 Z- p
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
' p4 T9 ~* D; m1 J3 m1 _0 O' h& p! W9 w" ]4 |. ?- _
& c( G% E6 N3 l$ m7 H
该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){: X1 b" x0 V' q  z6 l1 V( g; o2 w

  2.   @; ]4 |/ s! i5 x, y
  3.         //打开
    " R* E! R0 L: E% t

  4. 1 T/ S% I$ g  g( P( O/ h
  5.     }9 ^5 [* s4 q/ A2 @* Z& q$ d
  6. * Z  @# e0 Y, S. t2 m8 [9 M8 x8 d

  7. 6 |/ s% y- j0 e, L$ U7 ]1 C- X
  8.     socket.onmessage = function(){
      I* Y, }, \0 U) k3 i6 n
  9. 1 J" Z9 T0 p2 ?5 J) D- G
  10.         //在event.data消息数据2 C) N+ l0 O+ V' H

  11. . V* z: ^3 ~( ^
  12.     }
    , K( l& f$ \) I5 n9 r: P) r0 a$ E
  13. 3 G3 Y4 Y3 P& o  B' c! X5 T
  14.     socket.onclose = function(){8 B) I: @0 O" a2 f" L/ E
  15. 0 E, l2 S* s) p+ }- [( |
  16.         //关闭WebSocket
    5 V. r7 e; F# Y8 r
  17. 5 i3 N" y. N/ M3 S' u* j) N
  18.     }; ?* ?4 h9 ^7 `+ X/ M& k  X
  19. & ~# J. [; }7 ?, K
  20.     socket.onerror = function(){9 V4 _0 K- y/ ]: {
  21. 8 u2 Q7 j7 d: S
  22.         //错误触发4 A/ W4 H. F5 V9 o( u
  23. + v2 `+ n: J. E3 q. z
  24.     }
复制代码

( F* c/ z' b: M: M7 Q

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
  H) ^! g  D! T9 T/ D+ P& A
  U) ^/ e0 `1 T' H* t6 e9 [9 S

代码附上：

  1. <!DOCTYPE html>
    2 C( E) }* ~$ C( d: c) y* l
  2. <html>
    $ J( n, p& T7 g
  3. : u& v# z9 z$ `' d( u
  4.     <head>; |7 f$ E3 D9 E. f" {
  5.         <meta charset="UTF-8">& d* q5 ]5 H2 ]
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">) ~! J; B! v/ G2 P
  7.         <title>WebSocket</title>
    0 ], U. Y; ^8 N: Y' D1 h
  8.     </head>
    & \0 K9 m& `( o2 B
  9. ) ?7 `) O& `9 v0 x5 C8 I
  10.     <body># T) w. d* @/ D4 @2 E. F
  11.     </body>
    ; L3 O% B, ~, f/ _+ y" a5 C4 ^
  12.     <script>
    ( e& b# N  i$ J# U
  13.         var socket;
    ; g8 h& E% B+ M# H
  14.         if (window.WebSocket) {; u: i% @8 o& k' C* [
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    ; O6 ?9 C4 f9 Y) f
  16.             socket.onmessage = function(event) {, _  \5 H7 o7 L" g( a4 G' ?
  17.                 alert("Received data from websocket: " + event.data);% D* D! g  }$ n
  18.             }
    - u4 @. l! H( K4 V2 U1 N- Y& M
  19.             socket.onopen = function(event) {: n8 n: ^. h1 B8 E: e9 Y
  20.                 alert("Web Socket opened!");
    % @& A) ?6 u6 v( |
  21.             };
    " b" x/ }' x$ u. m; j3 \
  22.             socket.onclose = function(event) {
    # N. A4 Y7 q( }9 v% ~1 I' C% j, d
  23.                 alert("Web Socket closed.");
    " ^$ ]) W; L- D" i( |0 Z
  24.             };
    ( s* @& s* S8 f; ]& t& w
  25.         } else {
    , B9 _. C  r9 [9 D' K- u# v' l
  26.             alert("Your browser does not support Websockets. (Use Chrome)");
    ; ^, |7 r8 X5 a" W6 T# t& A
  27.         }( @2 g' B7 o. i2 y1 {; i

  28. 8 \# K# A& D0 n
  29.         function send(message) {) b0 ]! Z2 v; g& S2 F/ p9 U
  30.             if (!window.WebSocket) {+ M/ \+ W! Z0 M: ?% `+ u7 k
  31.                 return;3 F( Y- G: v+ E  Y, C- i7 p
  32.             }+ r7 l9 l6 E: e
  33.             if (socket.readyState == WebSocket.OPEN) {- C4 L2 p1 z( ^0 M+ s
  34.                 socket.send(message);  @0 A% E# O% i$ H: x* }
  35.             } else {: Y% l8 [1 O; l! O$ F
  36.                 alert("The socket is not open.");) d; j; d$ t+ r$ o
  37.             }9 t- J, a6 x$ I5 n
  38.         }. q: {, o. e/ H- a. p
  39.     </script>
    * y* k# y  n2 |/ B
  40. / {% j0 \. V) J) c3 x' T) }
  41. </html>
复制代码

. w; ?9 [5 t& S7 F; ?
( g4 X, S" W4 ^( C



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