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");  
复制代码
4 M: e+ O9 L0 y$ a$ N

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
; f- \% U/ d3 F
" ]7 ^& G. A; j' d6 e! O
% S9 w, L8 n2 |# Y4 |# t6 I2 S0 Y该套接口对象有四个用来监听套接口事件的回调：

  1.     socket.onopen = function(){        //打开  i  E- O# `2 q
  2.     }  i8 W% z/ S- B; ^# l" X3 b' Q

  3. ' w+ j6 B$ |, g" W: w8 Q
  4.     socket.onmessage = function(){+ A* }0 _  i/ K' H
  5.         //在event.data消息数据
    8 i, i: Z( \- z" |2 Q
  6.     }
    + j8 @" M, T1 P0 [: V% ~

  7. % y+ K) l+ _# x, F+ N" h$ l
  8.     socket.onclose = function(){, M7 z2 k0 b: s: M( Y" n# u8 W, X
  9.         //关闭WebSocket! C/ Q  R! s9 n) o) H6 a
  10.     }
    8 L' M  ^% y% k/ n: O; O: A! E
  11. 6 o$ v0 b. Q; Z1 \! i' _( y# b
  12.     socket.onerror = function(){
    # L$ u5 m- h0 ^+ V+ n6 p; l' p
  13.         //错误触发" [& [  f6 ?0 y! J1 N4 [1 w
  14.     }
复制代码
/ o" I' C2 u# {" l* s

) p8 L# B4 Y* I7 T; L8 @' y. M

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

  1.     socket.send(message)
复制代码
# F5 E9 S; ]; v4 ]2 K# g: m
4 T3 [" _  o, L# @" e2 `" {

, z8 k) h- T9 f/ ^7 M. ?' c

代码附上：

  1. <!DOCTYPE html><html>
    3 m' D  _& \; F) H( |
  2.     <head>
    ) r( r0 n# Y: _
  3.         <meta charset="UTF-8">- [1 j0 S7 n3 q, ~% \
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    ) G7 S4 |" D" P: S9 ]" z
  5.         <title>WebSocket</title>6 N9 t. M* c+ N# s7 a
  6.     </head>
    : R, m! ^- `7 `& Y: M2 F
  7.     <body>
    - X+ l- F& g9 C" n: w) b/ y
  8.     </body>
    # ~$ g# g/ V) u5 |7 J
  9.     <script>
    8 _) x/ f" F- I/ Y1 R" v) _
  10.         var socket;
    : b* o8 O" n* T4 T" y0 c( P! D* ]
  11.         if (window.WebSocket) {
    ! Q+ D( ?, q# ]& W
  12.             socket = new WebSocket("ws://localhost:8080/myapp");4 u$ e9 ~; F: {, f
  13.             socket.onmessage = function(event) {
    9 d6 w8 _1 Q5 a' U
  14.                 alert("Received data from websocket: " + event.data);
    ' z: u( y4 ~: D4 M+ G4 @
  15.             }
    8 h# {0 T' C, y3 t
  16.             socket.onopen = function(event) {
    4 u  k, E/ x  z# N, ?. F; o0 R
  17.                 alert("Web Socket opened!");5 z, q# G# i# l: v, e0 g
  18.             };/ y, }: Q! b+ |; h: }/ v( M( G
  19.             socket.onclose = function(event) {
    % H, y3 X( q8 [3 _8 Y; Y1 q1 l
  20.                 alert("Web Socket closed.");
    ) m" q& J! b1 |- Y) \6 y
  21.             };  i1 G9 t' v: T- x+ {
  22.         } else {1 f9 _# ^$ |: T# H. {
  23.             alert("Your browser does not support Websockets. (Use Chrome)");1 x# [& f' L' p2 a  ~" X
  24.         }( X, p' C# t: `+ n9 O5 S
  25. , [' R% I0 E0 Z# M8 G9 W6 Y, `
  26.         function send(message) {6 T( _' ~+ r$ T+ b! c
  27.             if (!window.WebSocket) {7 C9 b; B+ V% q& r
  28.                 return;$ o# L/ \9 p4 }1 P# V
  29.             }1 L) D+ N* e6 F* [
  30.             if (socket.readyState == WebSocket.OPEN) {
    % {3 D7 A7 K# [* B0 h. h7 }- g
  31.                 socket.send(message);
    7 t+ t8 U' Z! J5 c% B7 ~# Q
  32.             } else {
    - {9 p4 y$ z7 f/ l' r
  33.                 alert("The socket is not open.");
    ) E( `' ~* D4 d) ~, q; s1 w
  34.             }* @' {7 n1 S$ i5 c, J# D
  35.         }
    9 {% n$ P9 z+ }7 C6 D9 ]3 e' l( G
  36.     </script>1 D, B" s. w# y% r0 {
  37. </html>
复制代码

* I8 @& x+ H* W7 u- i3 `0 _7 W& A2 G  o; j: ^9 p- q
1 \4 ?3 }" k* T1 c/ x- S/ x# P




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