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


+ D0 K$ r8 P+ H& G9 N9 p与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
; L$ [6 Z- o. g  [1 v) Z" A5 g

$ @; M+ v( |, H该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){* e+ U$ Z* K& g* A2 Z  p; ^8 j% Q# R

  2. + g: \4 j4 I* q
  3.         //打开' h6 w5 N  b: P% V( G0 V5 @0 s( Q
  4. ; d% G" }) r# c$ K. o3 I9 M
  5.     }
    # o8 T/ d! Q2 [! i3 a  |
  6. 8 u) Y# D$ b" @4 L  Q

  7. % ~2 D/ d0 O/ x5 B' I4 R( z
  8.     socket.onmessage = function(){/ [6 h7 a# O, s$ [( m
  9. $ d9 a& Y0 ]) w( R/ c
  10.         //在event.data消息数据% ]; c9 ~/ S4 [& s7 d6 l1 K2 M
  11. 8 A" |1 z' p* e( d4 t
  12.     }
    $ s9 E9 ^9 V. k) h: Q

  13. ) \/ ?* t/ I% j% d7 M  t" ^8 y
  14.     socket.onclose = function(){
    2 H7 z5 T8 v/ |9 G; y& M

  15. + c* y  a9 C- I( o4 n$ g* m
  16.         //关闭WebSocket
    0 Q/ {9 V" U$ N% K+ z- V

  17. * [$ i5 D3 _9 Q, R! Q- c
  18.     }
    : _( R3 ^; _1 {$ J+ ]: w1 C

  19. ; }2 f! c/ Y4 V; V
  20.     socket.onerror = function(){( l* `; f4 l- D9 d* e; t& E8 b

  21. 5 H) Z3 H0 X0 ]$ E
  22.         //错误触发) \; ^& ^7 J+ r" ^- |) }5 g

  23. - h5 G" [0 \' t4 x: p
  24.     }
复制代码
2 v" y' s5 W+ p6 z* ]& o! W* d

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
# W' V0 ]9 h2 M- v3 @

8 h" c( o8 e2 R: a5 e, {7 O

代码附上：

  1. <!DOCTYPE html>
    " y. j- v3 U4 V# r( w
  2. <html>
    1 Q- _& T% S3 ~- x5 g9 J' S* Q

  3. 8 d# x: e' m+ Z, K& v
  4.     <head>2 Q9 N5 A' |0 i5 B5 G9 Y: Z
  5.         <meta charset="UTF-8">
    4 j' j+ b  D9 }' [
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">3 \. v5 E5 H. J6 I; o( M* R
  7.         <title>WebSocket</title>1 e' k6 L5 \% V3 X. I: k- u
  8.     </head>
    / `  t# C% R/ I+ D

  9. 0 ^4 s0 |* j5 n$ S/ M+ `) _  M
  10.     <body>
    - ]8 }: E# [: I( [
  11.     </body>
    5 O( X, x8 @2 g5 b% i
  12.     <script>1 Y# K5 l0 g8 f' L% m7 ]
  13.         var socket;
    ) [' |8 |( `8 x6 ]( a( O" `% M6 {
  14.         if (window.WebSocket) {
    8 U3 Q0 l4 _2 ~
  15.             socket = new WebSocket("ws://localhost:8080/myapp");
    1 V# n* d8 P8 e; u, _
  16.             socket.onmessage = function(event) {
    ) l) i9 D1 }' B1 q3 S
  17.                 alert("Received data from websocket: " + event.data);7 b) f/ _* n8 B' D. h1 s; @3 ?, ]3 |
  18.             }
    ' r* q, G4 m+ Z. Y
  19.             socket.onopen = function(event) {
    ! F) ?' E# e4 B& e1 ~7 d- `  x# X1 B
  20.                 alert("Web Socket opened!");
    1 Q# @! s  d( g
  21.             };
    , U; a$ b/ e( g. @1 z: A1 o
  22.             socket.onclose = function(event) {
    5 a+ H. K! I+ T# y# k+ x
  23.                 alert("Web Socket closed.");& g$ W4 L* v/ x
  24.             };
    7 P/ f. u4 `; `% j/ u  N6 \* @: x
  25.         } else {& e1 M% s* I- j6 I
  26.             alert("Your browser does not support Websockets. (Use Chrome)");$ |! E: {1 h: I: Z' c# ?: Q& `
  27.         }* D5 r1 J. I2 |

  28. " Z3 j' K- b, u9 d: v! `% b6 _
  29.         function send(message) {3 h. e( e5 K) F9 I7 k
  30.             if (!window.WebSocket) {
    $ B# w, D& I# v* R
  31.                 return;
    4 j& |& E4 E  k, W
  32.             }
    8 n! ^2 _2 W; n0 K# |5 @/ m- N: h+ `
  33.             if (socket.readyState == WebSocket.OPEN) {
    ) c/ M3 e7 o: \
  34.                 socket.send(message);
    3 p" f1 |$ X. n
  35.             } else {4 S5 w$ e1 ]- ^
  36.                 alert("The socket is not open.");
    ( ^$ A+ d* n: q6 U$ Y% v, Q/ N
  37.             }
    , a) c5 R, B: x
  38.         }
    8 z; S0 n' Z3 h- W9 I  W& m
  39.     </script>& i( V4 F3 _2 ~" i: C3 B

  40. + H0 \8 v. Z4 G6 M* [
  41. </html>
复制代码
2 g6 h5 u/ A; K9 ~. J3 z

7 {: p3 L# m! Z# d7 ?



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