浏览器使用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:// 前缀。
2 }6 M' _. g3 W p3 n: [* K9 E
. Y$ j/ Z% A1 g
1 U5 f: X$ b6 W. j& S+ k4 I( S/ @/ W该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
8 M9 [! S) V0 d9 `4 S
}* ~- c% m( f, N% r) x5 M$ @
2 R0 h. p' B% }: Y. U- ^/ b* O
socket.onmessage = function(){9 O3 B6 ~9 z" ~& B
//在event.data消息数据
3 @+ C0 }# u! ^& a: b. P
}
" H6 U- L9 e4 ?
8 \* e+ Q I5 d: a# A
socket.onclose = function(){3 B+ z% p. U" G
//关闭WebSocket
# }& d3 t3 M6 C
}
( `5 S* Y8 E% }0 t; j
5 q1 e6 Y, B9 K& j! Z
socket.onerror = function(){( a1 ~! O6 `9 n7 p* T8 D! E+ M
//错误触发
& y# |' |7 |) Y* Z
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>% B% w8 y8 m- f( z* [
<head>& l% E7 S5 a" s8 _2 r) y* n
<meta charset="UTF-8">7 U) u2 M' R, e9 P3 q; ?; ~
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">% n& x4 _+ O% e: K$ M; X" F
<title>WebSocket</title>& r7 J* `1 X# K( d; z
</head>. g; Z3 L j1 \8 n7 }3 G# c7 l0 Q
<body>
* f' a$ ^+ x+ H' R
</body>
[9 G5 f, Z/ M, t6 Y( h) q. y
<script>, K( Q: B. J6 T( z+ M% `
var socket;
2 x" K' I5 G+ R' S% Z
if (window.WebSocket) {2 y0 C: u& F8 f# H( l& q) X
socket = new WebSocket("ws://localhost:8080/myapp");
Z R* [& m1 a- U# U
socket.onmessage = function(event) {
/ G' ]2 C; s+ Z) l3 X
alert("Received data from websocket: " + event.data);0 e0 q+ b9 U( v. ]& r) M% S3 _
}
0 U2 _& t0 j* l% X! P
socket.onopen = function(event) {
5 v( a& r3 y. O, ~6 x
alert("Web Socket opened!");
- ?' v: t& j& P; I, k+ w% M
};
1 h' z2 u' S& ?9 M1 h( m0 l; v
socket.onclose = function(event) {! L+ Z) u0 P; } |% ~
alert("Web Socket closed.");
+ z# C7 U$ x+ i0 `. ?) I( \
};
1 W" f( }+ l1 k. Q; p* y
} else {
1 P9 z5 Z9 B a! R, Z
alert("Your browser does not support Websockets. (Use Chrome)");) [$ n: H* G# a& L5 f7 D8 E0 @# n
}" V \9 f' }' l
# j0 o' ~* E$ O7 z3 u! I
function send(message) {( o: O& a6 o+ C9 }( O
if (!window.WebSocket) {
+ Q) k! e0 `- p8 m b5 d, `
return;
) I/ b& w# Z* v$ \: X# |# K/ [
}
/ z7 g) x* n8 j3 i; P
if (socket.readyState == WebSocket.OPEN) {$ Z2 ]) _( T; ~8 J. A
socket.send(message);$ w$ I5 E8 Y% s# i9 G1 ?! Y5 c
} else {# j9 {4 m9 J, g; Q
alert("The socket is not open.");5 b! r2 [$ o* L6 ?
}
: K) t# F# e5 v8 P# O
}) L/ N1 p) @+ k2 `* E- @2 g a
</script>
) G- l" l1 o. K
</html>

复制代码

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

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