您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 14454|回复: 0
打印 上一主题 下一主题

[php学习资料] 浏览器使用WebSocket实时通讯

[复制链接]
跳转到指定楼层
楼主
发表于 2018-6-23 19:36:00 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

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

  1. var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");  
复制代码
; I/ U, e& }2 t% K' n- S2 a9 J

与http://这一URL 前缀等价的WebSocket 前缀 是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
- |" ]0 B- H, O
9 \! j0 D* |! i7 d; I1 a8 u: T# N
该套接口对象有四个用来监听套接口事件的回调:

  1.     socket.onopen = function(){        //打开8 N1 W% ?4 @% t' @2 l
  2.     }) H0 G  B+ E9 B& b$ ?) p

  3. - {4 E4 m3 D& r
  4.     socket.onmessage = function(){
    4 o/ W3 v1 X, H- r( Q: D
  5.         //在event.data消息数据
    + J+ F# O0 o" T9 i: v6 Z- {
  6.     }9 U" {- K- E, K4 K
  7. - [/ F7 Q: Q8 `; E/ F( Z( s& I# N
  8.     socket.onclose = function(){0 Q3 y& p6 ?0 o& P7 O
  9.         //关闭WebSocket+ x8 |+ W6 b' @# T* J7 I
  10.     }5 a2 Z+ S" [) f- L9 Y. x
  11. 2 P6 u, z# J; Q
  12.     socket.onerror = function(){
    9 ^3 ^/ p2 v4 n; l
  13.         //错误触发
    , ^) Z9 h# q" q7 o9 E! x: }
  14.     }
复制代码

: R% U* l2 g7 ~2 r% H$ b' s5 q! |9 d8 s+ x$ ~( ^- l6 l; q

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

  1.     socket.send(message)
复制代码

; @1 t( R& c: r7 m9 C3 K4 n% C2 t0 M
8 k! {! C, f$ P+ j% x

代码附上:

  1. <!DOCTYPE html><html>
    5 E$ m: ~) d6 B+ o% r9 B* l; s/ n8 E
  2.     <head>
    " D. f* R/ ^( `& z
  3.         <meta charset="UTF-8">2 @: Y9 p4 |$ }% a4 ]! v; e& d9 _
  4.         <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    7 O, x2 ^& I' ]6 X1 {7 P3 u
  5.         <title>WebSocket</title>5 {- N- b. j3 ^9 g# i
  6.     </head>2 x% R& U# M! k9 E
  7.     <body>+ Q# V# @; c2 I# i4 ]1 q' S
  8.     </body>
    1 [9 Q9 p( x1 }% A8 N; I
  9.     <script>. W' _$ E9 q* P1 J* f
  10.         var socket;
    0 N4 n- ~; z$ Q! e% Z3 i
  11.         if (window.WebSocket) {* r6 D1 x4 J4 l. g. s
  12.             socket = new WebSocket("ws://localhost:8080/myapp");' {5 w7 f( U& y/ S4 n9 N. W7 x
  13.             socket.onmessage = function(event) {1 f9 C7 L) D1 g( l  g
  14.                 alert("Received data from websocket: " + event.data);
    9 g+ ]% ~: F. l
  15.             }
    6 y8 H& }# q! w' c+ B0 n: \
  16.             socket.onopen = function(event) {5 V4 r) E3 H: y2 ?. y3 [
  17.                 alert("Web Socket opened!");
    6 e9 g: e% s& n# C; [/ ^9 s  x; G' n
  18.             };
    + A7 W5 R: x; c. f$ I! V
  19.             socket.onclose = function(event) {1 A) p! R7 @/ x* W5 a6 I
  20.                 alert("Web Socket closed.");
    ; C8 \- L" _6 U/ `- g
  21.             };/ i# M& f5 Z3 d, N8 z# `
  22.         } else {8 g; h# z4 K& s1 {- i0 a
  23.             alert("Your browser does not support Websockets. (Use Chrome)");
    $ D( W0 @' C" {6 I/ q" v
  24.         }
    3 m* @1 q) b- O: \  O. q% ]8 y
  25. ! p. h0 m/ a- g8 L  Z/ {8 ?8 t- z
  26.         function send(message) {' `( s1 k' b4 @7 V( I
  27.             if (!window.WebSocket) {
    # A3 e3 f/ o2 r/ f, v" I
  28.                 return;# N5 q+ _* c4 I+ ~1 ]7 o
  29.             }
    : T3 g" Y/ @4 L3 N. I% [. M( n
  30.             if (socket.readyState == WebSocket.OPEN) {
    " g7 J: @  b+ t
  31.                 socket.send(message);8 V5 a1 ^/ j" K  `4 ^/ y) g
  32.             } else {+ I7 k* R; q/ V. d7 r
  33.                 alert("The socket is not open.");, T. O# m$ {; ]* }/ H
  34.             }
    ) e3 J4 p& _6 o4 \* ?
  35.         }
    / d: m+ b  b2 M$ H# [( P% [2 r2 I+ y
  36.     </script>
    0 v; M. j# E$ H% k" q
  37. </html>
复制代码

  C; f) [) o) a
, f! ]1 L/ i' E9 }% R
2 [/ S. A, c2 n1 [* T: g/ v9 X9 y
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 分享分享 支持支持 反对反对
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

GMT+8, 2026-3-17 21:49 , Processed in 0.058268 second(s), 20 queries .

Copyright © 2001-2026 Powered by cncml! X3.2. Theme By cncml!