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

$ n# J' ]; A+ h9 c8 U0 z% _
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
; \1 S( @: Y* P
, p8 I& m5 C* Z8 H- g- _! E: {! q) H/ K' p- o
该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){: J* {/ f6 U9 P# c& j

  2. 5 J9 n( F' ^( I  s* W
  3.         //打开2 a7 r# j- y! r0 O& \

  4. , f: j+ k1 C! u6 v% _
  5.     }
    ) m# f4 I% Z0 g

  6. : T9 _8 P, |/ E. `+ r
  7. ( L6 M4 x0 [' d  M4 e
  8.     socket.onmessage = function(){/ B8 E1 Q4 }/ Z; [8 \/ g  ~, {
  9. 2 o7 a1 S* D( q
  10.         //在event.data消息数据
    ; j; f& O% n" }, @! m

  11. % p' o; f! a6 H8 _# ?! K. N
  12.     }' p6 o$ m$ `( y, [

  13. 9 Z* z/ b1 m6 J( r% l1 D# p5 E
  14.     socket.onclose = function(){8 s2 m- W; v. V7 b# J+ q6 _
  15. 9 Z2 b: z3 ^5 S1 X  ^  q8 Q
  16.         //关闭WebSocket7 [$ N  D: q( ~/ M

  17. ( w; R8 f7 U1 \7 v+ `+ d( j
  18.     }7 K' M  Z$ Y, Z' O  X4 N

  19. % L4 h' `% N/ K) M4 Z3 [- l7 B0 p
  20.     socket.onerror = function(){
    2 A0 a0 G. a" F, J6 O: i7 d

  21.   G+ N3 n+ ]$ F# t8 O
  22.         //错误触发
    ; `' o8 s0 A1 K  `
  23. % F2 ^0 l/ _% L/ J
  24.     }
复制代码

! F8 C# u& d* m) Y

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
( Z% \; V9 O2 i1 k$ Q  f( A

8 T" s# a7 d5 v5 H- n

代码附上：

  1. <!DOCTYPE html>
    , D6 l4 ?# N" L3 B+ b  s
  2. <html>4 w% P' ]) \6 @) E' r: Q/ [8 G
  3. 8 k/ H. O  C: }
  4.     <head>
    ) f- n( p: _9 `/ ~5 k8 n: @& \
  5.         <meta charset="UTF-8">  g5 a9 J7 Q, ^% q: x
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">0 W; j$ }9 h, {% Y$ ^- ^6 y
  7.         <title>WebSocket</title>
    " G- l' j: K. ~4 r
  8.     </head>
    6 v- ~' A2 q! H! b8 w& d

  9.   g) K' E2 k: c
  10.     <body>1 W' k" A9 F4 Q- M9 N; L& e" b
  11.     </body>
      |! ?6 a4 O. \- `. I2 a
  12.     <script>" M; f- w- N( y/ @5 [
  13.         var socket;$ S+ s8 z$ J# I- \) _2 e# l
  14.         if (window.WebSocket) {
    ; n4 F( w- l7 \
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    6 R* B. ~, ~; D3 J# E! ?
  16.             socket.onmessage = function(event) {
      c& b2 A4 v" G, q
  17.                 alert("Received data from websocket: " + event.data);
    5 e% A3 V3 ?% I. `# `
  18.             }
      G# c5 O5 D9 f
  19.             socket.onopen = function(event) {( e: Q; v9 p  `, K' l
  20.                 alert("Web Socket opened!");0 [: V$ ~2 O2 I; _# K) J
  21.             };
    3 r5 p% @! e! G0 x
  22.             socket.onclose = function(event) {
    3 M7 q: J' G$ u% |7 r' r9 T
  23.                 alert("Web Socket closed.");
    * k+ K; e6 K7 G$ S- Z' V
  24.             };+ E1 N* ^) a; Y
  25.         } else {
    $ w, W9 j. m0 \$ ~  O+ `9 K5 a) y
  26.             alert("Your browser does not support Websockets. (Use Chrome)");! k2 V0 Q: h1 Z. E
  27.         }( S/ G7 @0 d4 X9 w9 }7 p

  28. 0 x1 [/ k2 \' P4 X
  29.         function send(message) {
    6 s* O* R7 ]: N6 J. k! S, J- ^
  30.             if (!window.WebSocket) {
    2 B- ~. h: [6 z9 T1 s/ h
  31.                 return;% e- W" I0 n4 T& y% l! W! \. A2 _* ?
  32.             }
    1 i" i7 }' X( g2 E. d
  33.             if (socket.readyState == WebSocket.OPEN) {$ @( O7 U: M4 Q, R
  34.                 socket.send(message);4 R1 z5 Q5 [( ~: z/ O
  35.             } else {
    # r8 [) P  L, H7 W" N  z; x
  36.                 alert("The socket is not open.");4 @# x/ R! y/ N5 k, x+ U# x+ L
  37.             }
    % H* e: Q: G" l$ Y( W
  38.         }
    ( w$ H' R  M: s# q4 {6 r9 _+ ~$ m
  39.     </script>
    4 E; n5 j5 q% u# x4 s/ P/ T  C
  40. 9 [8 u0 I; m6 E: N' ^9 N0 [4 @
  41. </html>
复制代码

. n: S0 F8 x$ e! ~& u# X
* ?$ C$ B4 @5 n; E



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