浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

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

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

复制代码

- @; B1 j: e0 F0 \4 M
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ! R, ]2 M+ A, f T0 Y" A W R

* J' E8 }: y Z8 x2 x4 ]' f% B
8 A9 I$ D, m9 I' _该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
2 p% G( E( q5 w7 A4 n; i! e# H1 ]
( |% o' P4 ^+ D, l; ?
//打开$ Q. |7 e6 q1 U# {8 n+ A/ x
5 G* b$ F4 j- @/ ?" c5 |
}9 ?: l [8 T3 i" n
" j; ?# h9 Z: u
9 e ]. q. V8 N! B7 Y- B+ s
socket.onmessage = function(){
% c; c* u( W5 q8 t) R' B
8 l' s& t0 L( _/ `( R' M) n; E1 M9 H
//在event.data消息数据
4 ?8 W* @/ X' N3 z) V1 l: R
. [/ m7 s& D+ O& j# n; p2 I! h6 k: ~
}
# v$ v! d% w- M# Z& y9 L
. k9 ?" c* u7 m
socket.onclose = function(){
, e& W2 e/ R" r7 x/ R6 U3 O
Z8 P( v% t. x/ |/ G+ r
//关闭WebSocket
9 ?! d7 F+ Z' C
5 N+ F& o0 P! l
}
* ?6 b- {5 b6 S* L3 f
3 |6 g7 x: U, g2 }0 i
socket.onerror = function(){8 X2 ?! k$ f/ Q) ^
+ |' ^# ~) {) n9 j
//错误触发/ w+ x! ^/ K) W8 X# g2 Z! D0 Y0 ]/ P
8 }4 I, g4 P: S
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>% M2 u' Q! u9 N( Y% ~/ I
<html>
9 B, {9 s1 T" q' o% u
' c2 K% p* o* H( z# `3 s' H
<head>
" z: {1 f! X* N, A- r7 p: _% I
<meta charset="UTF-8">( |$ x+ o$ A7 ^: `7 o3 z4 Q
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
; V/ {8 b4 }% Y0 D8 G. v8 [
<title>WebSocket</title>
! H( x6 V3 U$ S9 P
</head>6 F7 O( R+ x) ^# R: R
' G+ u) v, V$ l& L1 |6 H
<body>% m$ Y6 q; W( C D# ~' [% R. \
</body>
. E8 a' U( a1 n/ D
<script>
var socket;
^0 v" i7 \0 k1 ]0 W) [
if (window.WebSocket) {, h$ Q# ]+ E: l1 p D% }5 i
socket = new WebSocket("ws://localhost:8080/myapp");6 P# F4 ?9 h0 x# X0 i
socket.onmessage = function(event) {2 Z# b& y0 _" E9 e) H3 x4 M B5 C
alert("Received data from websocket: " + event.data);
& o4 |8 [) N5 e8 G! m; k B. p4 b
}
9 y1 W3 F6 l. A2 k0 [
socket.onopen = function(event) {
1 U1 ?* T2 ^! x. L% _5 \
alert("Web Socket opened!");
2 ^" \, M, Z& I! k3 M0 k5 Z& }) _
};
) E% i7 }- k& {, t9 X
socket.onclose = function(event) {# {6 v. r( D `5 q9 l+ @
alert("Web Socket closed."); ?8 T8 k) y- `& D K% R" q
};
. \# |" n) E, E. o$ g9 S
} else {
) m) t# `5 I {. N
alert("Your browser does not support Websockets. (Use Chrome)");5 Q5 p- c$ S- z5 T9 P/ }' u
}
. E! ?6 J& U: h% w- D
: ~7 J) v2 [7 ^* a! u* Z
function send(message) {
# B& ^- O) {3 n/ F: Y$ P! K3 j \
if (!window.WebSocket) {9 J* k7 F2 ~! [# D5 B# v/ X8 Z
return;
& A! H: s8 I# B: Z. \: X4 m* @
}
1 k' m& d+ M0 b0 J) u
if (socket.readyState == WebSocket.OPEN) {, x! A3 H6 X4 C K
socket.send(message);' u! A( v* Z% e) _" m: L' h3 _
} else {
' D1 j0 |, h7 X6 W
alert("The socket is not open.");: o' X' o6 _' k
}
2 @7 S; {8 {0 w8 H
}( a- b# u4 P" m! z# a5 N; x% J/ ~
</script>
# i1 i' N8 ^" F- X
# `# W( B. n& l0 H0 D0 k
</html>

复制代码

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

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