浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
8 k5 M4 @ C+ @/ b; e8 L8 B' f# K2 S* J" m$ C2 q3 N

- R( \" y2 V% @ k$ Z该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
+ n3 ]/ F. [) S
}
6 n- I2 O1 m9 v: X
* u3 }6 d% E& H0 V% w" {6 I
socket.onmessage = function(){- m3 ~" n! O' Z. x# w4 x. X
//在event.data消息数据# e% W/ N7 v" t: z8 j$ k# h% T1 ~
}
6 f1 ?7 y* b( |8 H9 H6 v$ V8 S7 U
, c4 `* x% I* _' c- A! E
socket.onclose = function(){- J' E1 L; P1 S' {' U% Q, U
//关闭WebSocket
7 V+ Q& D5 S1 }( _" ` \
}
7 P9 n* a3 O7 p5 z9 W
}# t: t- r& J" J
socket.onerror = function(){
- n: R+ F$ y# M* C" f
//错误触发/ ^8 O* m# N" K/ }6 ~/ m6 t
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>2 k) {% A$ s# Q9 U
<head>6 @. X1 z& r0 L/ y5 Z
<meta charset="UTF-8">; b5 C/ ~4 r' c$ r
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">) o7 [/ u/ }6 \# z
<title>WebSocket</title>; P1 l) `+ V9 N" I/ v7 I9 I) I& r% W
</head> x% j6 v# {4 ^- H. V
<body>
0 O7 R- x7 Q1 R) ~; `: l$ X
</body>
8 R- d5 [0 g$ ^9 x& m# t% B
<script>
* S5 n1 ?4 n* n2 i0 i! C: J3 a1 e& g4 @
var socket;! m5 P/ r+ v" u) O
if (window.WebSocket) {- i# q" D g' \+ X
socket = new WebSocket("ws://localhost:8080/myapp");
: W' C& t5 s1 B. j
socket.onmessage = function(event) {; f% [3 ?& p% @* L" c" N; X
alert("Received data from websocket: " + event.data);5 Y/ }4 n! s1 j" ?0 V6 a
}
0 i( c- ^ c, j; Y2 r
socket.onopen = function(event) {
" J2 C4 b/ ^$ p7 C4 D
alert("Web Socket opened!");; s$ s2 Z# _0 I, K4 t" v
};
5 d y+ w1 A$ Y$ H7 e: I; i4 Q7 m2 o
socket.onclose = function(event) {
0 m2 k3 g* e6 _" ], j
alert("Web Socket closed.");4 ?$ Y6 \6 b& }' r$ {0 s
};
) d+ s7 U: ?' S$ }( y
} else {
8 @/ C! @6 i/ X' }6 M2 [
alert("Your browser does not support Websockets. (Use Chrome)");) M8 b3 L. v( B1 L7 a# C
}% B N% X2 s0 I! }; Z9 v
' z) Y8 k+ F3 B' t0 b( N
function send(message) {% m; |4 M( V% m3 z( e6 f8 V
if (!window.WebSocket) {
! p" u( Y9 `+ k& d% k
return;2 g( Q; W1 w2 ~
}
( h7 r/ W! S0 \) W# d0 T* B
if (socket.readyState == WebSocket.OPEN) {
1 Q7 q5 [/ f6 g( q
socket.send(message);
8 x- X; E6 V0 M/ f
} else {$ P4 f! s8 L" e& |
alert("The socket is not open.");1 w) S, n1 ?; v1 O8 o
}" |& A8 f- B. I+ `8 ^
}6 o/ V. P2 D1 l0 B3 f
</script>
" V, y! w! z, @: e' _
</html>

复制代码

帐号		自动登录	找回密码
密码			立即注册

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