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

$ h8 d, N# G5 b+ {& q' U
与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 " `/ ^3 `; d0 P. Q, p7 l2 y

; k  f% S5 l) w0 |5 F- a
2 [& K, O1 G) u2 \6 O1 `. F该套接口对象有四个用来监听套接口事件的回调：

  
  1.     socket.onopen = function(){
    $ r2 ~* k4 R. E0 ]6 q3 a' X
  2. 1 J7 E/ X: g* a( M
  3.         //打开. a/ \4 h" S& w1 ^" l2 r0 ]

  4. # H. a& n1 N- m) i
  5.     }
    8 K! ^& o0 B" [$ E6 D* Z

  6. - i  {$ e4 {4 q- o7 C

  7. 1 k/ T# [+ U: u2 Z/ j# Y9 ?
  8.     socket.onmessage = function(){
    1 G3 A' O9 P1 ]2 ]

  9. - m, `! t  ^0 b" J( S
  10.         //在event.data消息数据  F% B2 C7 L' B4 r
  11. 3 [+ y3 z' N- L' C, a
  12.     }/ [2 s, x3 h6 L% c& e4 }5 C
  13.   n5 g, C! V/ w, {
  14.     socket.onclose = function(){
    : d' I/ D6 X/ H; M1 g4 K8 ^6 T, V

  15.   Y9 @+ l' Q$ {9 M# N& ?' v8 G; m* ]
  16.         //关闭WebSocket* P7 o* `2 ]- L" R
  17. ; y$ H9 e2 V/ F( v$ t: Y
  18.     }
    3 A4 e$ k7 D8 P5 t# {

  19. * R" V. X: W9 I% D; j
  20.     socket.onerror = function(){
    % ]7 a5 b1 M* Y, c2 a

  21. 9 E; j8 f, ^4 R% X0 A
  22.         //错误触发
    8 P$ Y9 ?* t) v  ?# d
  23. . }: Y: f  J- j# Z% H3 y
  24.     }
复制代码

7 q5 _, [6 V4 \7 p% i- E

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

  
  1. <font color="rgb(79, 79, 79)">socket</font>.<font color="rgb(79, 79, 79)">send</font>(message)
复制代码
8 H4 A- m; H' f

, P$ b5 g  _0 Y, j6 V

代码附上：

  1. <!DOCTYPE html>; r) d8 B" l) X3 T8 m
  2. <html>
    ; }" }2 n$ X5 e7 q  ]  r+ ~" j

  3. + Z; G' _' t6 ~6 Q5 J( y2 u  M3 N4 j" a
  4.     <head>9 {' k! j/ m+ w; s6 B" H
  5.         <meta charset="UTF-8">
    % ?: u6 P; ]+ ~: ^7 s2 S
  6.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    0 S4 \$ y$ r1 @  O
  7.         <title>WebSocket</title>
    + ]; S# a( ^! y
  8.     </head>
    : h( q* B- e% W* ?3 I9 w% D: J' n& e
  9. 2 k& k( O* A( L5 ~5 V( \* U
  10.     <body>/ _  Z% J2 h# ~
  11.     </body>
    ) p) x( \" K- I
  12.     <script>
    $ [/ S$ Q/ \& O2 s
  13.         var socket;
    7 C2 l! |& K2 t/ i3 H
  14.         if (window.WebSocket) {
    : |2 D: F9 ^) `9 f1 \! r; A
  15.             socket = new WebSocket("ws://localhost:8080/myapp");) t8 d8 w5 }" @8 U
  16.             socket.onmessage = function(event) {
    1 c" K: u& A; T- g1 |$ D
  17.                 alert("Received data from websocket: " + event.data);! v  t( \7 c, b; \3 m
  18.             }
    ' X1 N/ \% R+ t* y5 g" H( s
  19.             socket.onopen = function(event) {
    5 ?& y: s! S- J# T
  20.                 alert("Web Socket opened!");; \3 |# }+ }1 e$ R) Z0 B. f
  21.             };
    3 z) ]) ^! J2 L, C
  22.             socket.onclose = function(event) {
    % ?5 z" s/ k9 C- M
  23.                 alert("Web Socket closed.");& e& F) U% h/ _7 h/ D
  24.             };, ]; l5 r% O! R* C4 d
  25.         } else {
    2 M. L2 v% p( }9 w
  26.             alert("Your browser does not support Websockets. (Use Chrome)");! S4 X9 P9 d0 A# u' s9 ?1 O
  27.         }
    3 V: @" a1 _( d9 _: P3 B$ E# v
  28. ( _# u7 L0 |" d) k2 P( |, [
  29.         function send(message) {: h4 K6 v) {6 d; s; R
  30.             if (!window.WebSocket) {- Y' q3 ?" c& z2 q* H8 D
  31.                 return;
    - l  z0 x1 C7 s  r8 a' j  h! o; m
  32.             }
    2 \& @/ j) k. D1 G& D2 T4 B
  33.             if (socket.readyState == WebSocket.OPEN) {
    9 s7 f2 j8 H4 I: v3 ?( L! w: T
  34.                 socket.send(message);  E2 C- G) c! S- r9 ]
  35.             } else {) P/ o/ X: z+ g# e) ]
  36.                 alert("The socket is not open.");
    ) h8 G9 J" H1 U% i
  37.             }
    $ U% K8 h( l1 U3 x' C
  38.         }7 I0 \' @1 n3 r) E6 @2 U" g
  39.     </script>
    8 e4 c2 V2 F" X5 q) u1 `1 ~

  40. 5 k2 D- g" N7 c! J
  41. </html>
复制代码

8 h3 U& U, w& A1 c: I8 [/ z4 S1 M( w$ q$ j4 d8 Y/ ^9 s5 t2 I




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