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


. k: Y$ x5 S- g% u" G+ ^与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
1 a5 t6 L' X5 s. C( t( ?; k6 x: h
6 D; B' O6 s! v: b) n% V+ y$ Q9 z5 H6 ^) r4 Q; o
该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){  v" _2 i/ y3 n6 f

  2. + i+ F6 O: Y: Z0 Z
  3.         //打开
    * X, E' V' B7 F  h
  4. % Z/ U+ p9 T- h- }2 e
  5.     }; x: Q, u1 M) u2 f
  6. % k% T) J" [& j! I

  7. ' _9 V! F2 x+ O, m
  8.     socket.onmessage = function(){
    2 ?2 Z2 {) }$ b& p: {0 {$ r* G

  9. 9 R4 e) |& {: ]8 e
  10.         //在event.data消息数据
    * R5 O! }0 Y, S* M) p3 [  \
  11. $ j- _) B9 ]8 o1 @# S# D9 |
  12.     }5 m0 M1 l4 v$ w
  13. 8 S0 N! s6 r% y) x4 {* u* C
  14.     socket.onclose = function(){# E, R. f3 b+ d; o- b; k2 [% a

  15. 0 p! q% X& ^2 N- `' [
  16.         //关闭WebSocket& c; y, E8 V$ s1 r$ p5 z
  17. 9 `4 J* C! S4 E. S: ~
  18.     }
    ) `* t7 o$ S4 e& z7 C. I$ H# d; F2 V
  19. 9 D% ?. ?4 D# G! `8 A2 H/ l  }% Z5 ?; p
  20.     socket.onerror = function(){
    6 L' {1 l5 ]/ V- w

  21. ) J/ h- i2 U7 E" ]- Z, U, T! O
  22.         //错误触发
    ! `9 L8 P2 a; k- t8 f

  23.   [# c6 H/ D& H& E
  24.     }
复制代码
' {, X. [( N8 m2 _; s

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
6 C) @6 T) a, u

/ i& d& J# o! ?

代码附上：

  1. <!DOCTYPE html>6 e5 j+ Q5 V8 x$ l
  2. <html>
    1 O# _7 U6 u4 l

  3. ) a- V7 e; n% @$ E
  4.     <head>
    : E& w; H. n9 ?# O
  5.         <meta charset="UTF-8">
      E8 b) F  Q& |, Y& R, [9 y: v
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">% C% a& ~2 ^% O' C# x
  7.         <title>WebSocket</title>6 I" o/ h% M- ^$ Y" M. j9 y
  8.     </head>. `% \! H/ H# t1 R7 ~. \; L6 Q
  9. 3 U  K$ P4 g2 y# Y- A1 L. I
  10.     <body>* ]9 L( S! n7 B+ W  b' }" I
  11.     </body>
    / f+ M, r& n7 r( ^* S
  12.     <script>
    - s7 ]/ F* e) p* L
  13.         var socket;9 p' g  S6 V! J6 D" Q! F' o
  14.         if (window.WebSocket) {
    3 q/ V% u5 p  C$ x' B
  15.             socket = new WebSocket("ws://localhost:8080/myapp");1 e9 D) }6 B0 X" e
  16.             socket.onmessage = function(event) {% e( p- T7 I8 v* `" \
  17.                 alert("Received data from websocket: " + event.data);
    $ Z1 Y& ^( s* m  Q4 d" O
  18.             }5 u5 r! C( U! x; S+ P( `7 w* b( M
  19.             socket.onopen = function(event) {
    . u8 u. a: u$ g! R9 {
  20.                 alert("Web Socket opened!");
    & D4 ~6 o* a8 i4 E4 r: h4 Y' L5 d. p
  21.             };- |- Q. q2 M9 H  C5 U6 P) |
  22.             socket.onclose = function(event) {
    " s( M2 X( s: ?5 r  G9 K0 B
  23.                 alert("Web Socket closed.");
    # M- G- N4 E7 ]- l5 Q
  24.             };0 [+ X" h8 S7 e8 z% k
  25.         } else {! J2 r. |8 ]. n& f, ~: z
  26.             alert("Your browser does not support Websockets. (Use Chrome)");' O% u3 F9 s$ S& z
  27.         }3 X" P$ q  @8 f( o% P* J( s

  28. 7 d. @# R' E2 q+ E/ d
  29.         function send(message) {
    " V$ O* M. `# a& G3 d. v. Z' {
  30.             if (!window.WebSocket) {$ k8 C, t. W2 A- }: i5 A
  31.                 return;3 ~, i, e" F+ [- ]9 ^# f1 I5 I6 e
  32.             }9 b0 |: o! }6 W0 U
  33.             if (socket.readyState == WebSocket.OPEN) {
    , y3 l: J! K4 Q) _( w. z1 A
  34.                 socket.send(message);
    ( Y' |8 `4 N5 f% P2 {/ {5 k3 j$ U
  35.             } else {6 t2 A& r2 N' b+ N  V# Z0 j
  36.                 alert("The socket is not open.");
    $ O+ @! \7 ?. y, J3 C
  37.             }7 F" \4 ~1 [( N  ?" Y$ ]
  38.         }
    # s/ u/ _9 x& V* W3 n: c2 w( z( z# [9 p
  39.     </script>" k5 H9 J, j+ S
  40.   {0 I+ |8 A& g  V% u
  41. </html>
复制代码
, D8 E; U- Z$ o+ ]
6 v: F) Z' r) a1 U/ b; H




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