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

/ x: G: w# C. B& K$ V2 f; ]4 r

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
7 T9 h( m6 e% P
& n& K. P1 s( N0 _' f* g$ u' c, b. p  I9 Y6 S: a7 b; l
该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开$ T5 O2 t- T4 Q& U  h
  2.     }. |1 L# }. d( z- G/ o, x' m
  3. 2 ?/ ]( P2 x! p
  4.     socket.onmessage = function(){2 c4 S0 l* S% g; {  @
  5.         //在event.data消息数据
    & b" z+ i, [  w+ M  \5 [/ j
  6.     }
    0 q0 K1 s1 i4 ^. `
  7. 8 R- t7 z& t" z- G1 O- ~  Y: k
  8.     socket.onclose = function(){4 q( J, N9 a2 J# `/ h$ R+ s2 \" h
  9.         //关闭WebSocket
    0 m( r8 P2 `9 a
  10.     }* j# W) \7 p  \* u0 V2 `% Y, o
  11. 5 ]. m# E' O" A- g( b
  12.     socket.onerror = function(){
    8 ^2 q1 L) `. w0 L! ?
  13.         //错误触发: U! [( b0 ~, \1 o* k, H9 D7 s
  14.     }
复制代码
& F' d' X3 Q/ g' r9 V' y; E" n

( I0 `/ F2 A( ]; m) H5 K4 l: B; a

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

  1.     socket.send(message)
复制代码
* u0 c1 a- m( o5 Y
. ~+ V3 I$ T2 t
% I( T6 W* L1 `* }

代码附上：

  1. <!DOCTYPE html><html>
    / S) x: L; M1 g2 G% B# Q
  2.     <head>
    & F; E4 V0 V9 x
  3.         <meta charset="UTF-8">! {, j) m& H# v% t
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">  B" {/ i, i" A0 N
  5.         <title>WebSocket</title>
    2 w  [. K( f0 K1 c- x: E
  6.     </head>% I" x% R/ C* l; B
  7.     <body>2 {( Q6 b) G3 G
  8.     </body>
    $ ^. F1 Q7 u! w7 D( K6 r
  9.     <script>
    3 w7 s4 J& _5 |* d0 y
  10.         var socket;
    : i! C+ w  j/ A. S" n
  11.         if (window.WebSocket) {0 ^" f1 P, |# y  c0 b$ @4 t
  12.             socket = new WebSocket("ws://localhost:8080/myapp");1 _% p) I- R4 ?5 ]1 ~; \1 m
  13.             socket.onmessage = function(event) {5 a2 M# F! N# [3 W7 d1 ?: H+ s
  14.                 alert("Received data from websocket: " + event.data);
    % Z% `3 t5 `) Z- s
  15.             }
    3 ~2 F5 C$ o' D9 a
  16.             socket.onopen = function(event) {( D5 Q. }6 G! [
  17.                 alert("Web Socket opened!");7 J2 F* e( A" b: I6 k  Q1 i
  18.             };
    - n* Z2 `2 M" V, W
  19.             socket.onclose = function(event) {
    , S7 A# A( a6 K$ c+ R
  20.                 alert("Web Socket closed.");
    % t: q, G  l& E
  21.             };
    2 U  ?# m5 h3 N
  22.         } else {. E$ m: {7 Z' W8 ^
  23.             alert("Your browser does not support Websockets. (Use Chrome)");; [  B2 z. U# v4 [1 p  M0 m! Y
  24.         }* m! L8 g& W* u  y' p; G
  25. ! u: M" e4 [9 V5 u8 Q6 @
  26.         function send(message) {3 V9 x8 y: y! X* v+ i9 P
  27.             if (!window.WebSocket) {
    ) K* s3 n6 u  V
  28.                 return;+ b! @& O; n3 \7 h5 k9 V4 c
  29.             }! o9 [4 v9 O" o. H, O2 ]
  30.             if (socket.readyState == WebSocket.OPEN) {5 v) e1 e7 @8 H* u- ?7 O% t- A
  31.                 socket.send(message);
    : o3 ~5 Z5 A2 l; u# \: M+ ?1 L
  32.             } else {
    $ X" T' U) `0 o' R( z4 x& F
  33.                 alert("The socket is not open.");) N0 l+ N4 @# d  E- d5 z8 h
  34.             }$ p" _5 x' E& p1 U  p
  35.         }
    ) [, J' o9 R0 }" v1 [1 [
  36.     </script>
    2 R- z" Q5 |% c: G. G( N
  37. </html>
复制代码
( i5 ^5 K( a: Q4 |# O% l

3 H/ q7 p/ P6 \  V0 b5 G4 i- l1 P. q- h: }5 g




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