cncml手绘网

标题: 浏览器使用WebSocket实时通讯 [打印本页]
作者: admin    时间: 2018-6-23 19:36
标题: 浏览器使用WebSocket实时通讯

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

  1. var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");  
复制代码

, E4 A- `! u2 i* ]9 o1 F) c; o/ y3 n

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
( i5 L, f+ w( P+ n$ k
* K. Z( R% O$ y# D% ~5 D, V1 B# `3 s# ?( ^
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开
    . S9 ^5 ?0 i9 u+ }
  2.     }6 y# i& q8 b! i" ]

  3. 1 Z% \  `- ~8 a
  4.     socket.onmessage = function(){
    1 w1 B/ f2 Q* {5 M* ?. d; ^1 D2 |
  5.         //在event.data消息数据# \; O9 I" F% h! `
  6.     }
    / m: _5 C; _7 N0 A) G

  7. 2 X1 u$ y6 s; t& T8 }
  8.     socket.onclose = function(){
    ) V5 D, D, a4 @; [* ]# v7 y4 o- ?
  9.         //关闭WebSocket; G# |5 v  b7 a' p6 |7 H5 X
  10.     }
    ' k1 q) o/ p: V1 u  ?4 p, V
  11. ( f: w) E. d7 U5 n5 y. x$ X
  12.     socket.onerror = function(){
      C* [5 M/ H: J8 S. E- X
  13.         //错误触发: v2 }% A9 t" O6 Q
  14.     }
复制代码

9 o$ u1 g. t8 `$ C6 r: n+ L3 ~: n7 w- x# P  M' V3 _

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

  1.     socket.send(message)
复制代码
6 q( ]# v- s9 L$ L  j

7 b1 E7 h% c7 Y3 \# ]. N- w
2 j" K' ]! D, F- A- B8 R2 N

代码附上：

  1. <!DOCTYPE html><html>) L: ]! y0 G" ^0 g0 P# w; H$ X( K
  2.     <head>& s. w$ B5 M3 n8 U
  3.         <meta charset="UTF-8">
    $ e$ J+ Q. ^( O; Y# q0 D4 |# ^
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">  x3 k9 P6 d' H
  5.         <title>WebSocket</title>
    $ H, }( o1 e  T2 Y* ~
  6.     </head>
    5 A# Q3 V# w6 _3 w' X. \+ @
  7.     <body>5 ?+ T) F4 I, d) n. t& }
  8.     </body>4 f. D: D! b9 s! p  g2 k+ V
  9.     <script>3 Y) J% F! }* y. H  M7 F4 n
  10.         var socket;
    4 [) v; r4 E8 [9 S/ E" R
  11.         if (window.WebSocket) {
      V0 S( N, G, s
  12.             socket = new WebSocket("ws://localhost:8080/myapp");
    3 v6 D5 J/ I3 ^7 j0 p7 V# B% Y& ^
  13.             socket.onmessage = function(event) {
    * C. V( b2 ?0 p2 _5 `5 F- Y: C
  14.                 alert("Received data from websocket: " + event.data);5 `; j" g1 j) J  P/ t1 b
  15.             }
    , K- d8 j8 [3 Z9 m/ g- s# [
  16.             socket.onopen = function(event) {
    3 n8 _1 U. c9 a* n3 x5 A# \
  17.                 alert("Web Socket opened!");
      ]+ x5 }; f6 z
  18.             };+ s. Q% L0 _( M) n
  19.             socket.onclose = function(event) {
    . G4 R; g0 q8 Q8 w; {
  20.                 alert("Web Socket closed.");. F( }  h0 h7 G: }' ~) M
  21.             };; b! e; }1 p% I6 ]$ G
  22.         } else {
    1 U* e0 ^  y0 x2 l( x" a5 P# t" @+ _
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    " N; V8 c5 C% \! {7 r4 K4 t4 \
  24.         }
    / w, w$ R- r  h1 H9 e1 n( X- N) r9 ^
  25. + J$ z- ^( V2 j4 b
  26.         function send(message) {- S* n) p9 Q/ t. Z+ ]
  27.             if (!window.WebSocket) {
    6 y/ k: b1 T# Y- S0 I
  28.                 return;! V1 A* Y  T, ~: i6 L, J6 M
  29.             }
    0 T* z, O" X' Y$ g4 K
  30.             if (socket.readyState == WebSocket.OPEN) {
    : r1 K+ Y6 I7 U5 ~4 [) N. H* t
  31.                 socket.send(message);
    ( n: c1 a9 p: S- `4 D, h0 |! ?* I
  32.             } else {: V1 w. L& r( x& O, O7 ?. O
  33.                 alert("The socket is not open.");
    2 r; _  M6 Y0 G) h* I- i
  34.             }
    $ O* H+ Z6 @2 Z) w- J$ T+ s
  35.         }& x! g* c2 h1 I% {
  36.     </script>
    8 n  R3 W; c0 ]- X, L# C! _* \# x6 x* P! o
  37. </html>
复制代码

/ K  F5 t& K* J: n. w
9 e. Y& n* i+ u/ j/ H" L% P
1 [8 m5 Y/ T( p5 h7 b) L) j



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