浏览器使用WebSocket实时通讯

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

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

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

复制代码

1 ]9 q' k( b7 e4 G与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 / ?$ D1 j1 J) y, k, L
1 }) K. ]0 w% }3 B

: c3 o' M/ J! M( ]7 X该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){- V2 j; `1 F* f) ~" F/ Z
% m1 F G/ c B' G( e, C
//打开
0 U' |/ E* T" j0 |8 e. U
# H% F: ~' I% u5 v, w# D
}) t' N) l: W8 c6 Y7 S
: a3 h& r- [6 m5 P
% c1 x$ ^$ v7 y2 t
socket.onmessage = function(){/ l1 ] f& e" x9 X: U
5 B( f0 w6 _" X3 U- X8 s. \" }
//在event.data消息数据
* g! p( g7 {% C. d
3 e! P3 Q8 a4 P4 u& a8 Z
}
3 `" \, o* n, ? N
8 X( C# ]# u8 T% t9 u5 M# t
socket.onclose = function(){
( d; j4 o$ `) H- s
! \4 p, c' ?3 x) k5 W, q! {
//关闭WebSocket
" }; B& U$ G8 T+ i
( ]! V* j0 \- U7 I& C/ ?; V
}5 o# j4 g a5 p6 d) i5 p# L
1 g5 b* k% ?5 t3 {
socket.onerror = function(){' Q2 Y8 t: h' |& n6 i1 N8 M7 W
, N: R* ]0 X& W
//错误触发
, r$ M6 R$ O$ q) k, d
- k% s& U* R. Q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
7 Q2 L0 x' ^( Z9 Z3 v
<html>
! x% _* Y+ G0 A# z2 H
/ w; x& K) u3 q+ u% _5 d; F
<head>2 e8 i" q+ }. a- K- n/ [0 H( O
<meta charset="UTF-8">
, r& _! o: c% m) E: X
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
2 }. Y# c0 _* l8 N+ ~6 r
<title>WebSocket</title>
% m5 F+ Q8 B9 |" Y
</head>) k& D& G: _3 F0 f! i& O0 Y
/ t% B% o; D: W% e X2 i! I* I
<body>
0 V {' x' n0 g& J( F+ W
</body>3 [! c: r) L7 b- E% ~! M
<script>& {. s5 G, J0 \& A7 j& b" v2 P5 G" [' E$ n
var socket;
6 G* j. }5 _$ E/ i1 ^. o) G1 ?
if (window.WebSocket) {
. G8 w0 K' l6 f: `* |7 o$ f! o }
socket = new WebSocket("ws://localhost:8080/myapp"); v: n, R. X4 h) r
socket.onmessage = function(event) {
/ Q, j$ N* v' U5 i6 e( X
alert("Received data from websocket: " + event.data);
+ u) w0 r2 V( V/ K
}6 {9 {3 y/ r2 P2 H! Y& }! |
socket.onopen = function(event) {# j0 L" C6 A9 i" U: c7 j: v$ C
alert("Web Socket opened!");1 A5 |9 c) e1 H
};
$ R; n$ ?8 |# m1 ^- M+ H
socket.onclose = function(event) {
& W. v( q- Z/ X' m, U/ L/ v
alert("Web Socket closed.");+ ^# w+ K4 j' h* q
};! x; R3 ^; T. p6 h7 H1 j
} else {
- _9 [; y, z; w9 c) \
alert("Your browser does not support Websockets. (Use Chrome)");
; `2 w2 }1 y( d& D# O# |# \
}
6 r1 u: S# ^) o# E7 F' z
3 ?& {+ v" z/ F
function send(message) {
6 V9 J( E, B0 G; x
if (!window.WebSocket) {1 m% i) U7 Q4 C( l$ K' J. e8 j
return;
- Z0 n1 X f3 J* {
}1 l! e" u% n& r5 v
if (socket.readyState == WebSocket.OPEN) {) K M- m" d9 s, M7 J6 k
socket.send(message);) q2 e' L3 s5 N7 ]7 t9 r
} else {2 D6 C! ` S- P' q
alert("The socket is not open.");
4 @4 _ E' @) f- ?6 y+ e6 e, E
}
7 [5 I5 F2 s" @ N( f, R
}: q& y! N; n0 a
</script>$ D8 F( T4 I% E6 r$ S' J
/ o% v! p8 U3 C1 d$ _
</html>

复制代码

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

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