浏览器使用WebSocket实时通讯

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

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

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

复制代码

' F, Z( \& V' J8 ]' h) H
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
% g' m0 D+ `4 k- B$ y
0 H8 E3 G) b: k- q
* X* _2 s2 Y" C6 j! E1 g: J7 U6 d该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
$ f, a9 l* d( E) Q% I7 w
& P: p7 q& r2 v2 C9 T2 z
//打开- b0 K* Z/ y Q7 |; U
8 i9 G' S7 x. [3 C7 {
}- ?+ P3 i9 ^# ^( w% @
6 m8 b: W& O- @' t/ l$ `* s* F
$ ^5 ~9 T* O- S4 J: l2 T7 x
socket.onmessage = function(){& M9 z# k8 O4 {1 D$ ^
% _6 U4 a; D3 r( r+ x7 D: r
//在event.data消息数据+ X+ j6 h ^2 v; `# l" r- K
& ?; y! \+ J1 v) h' ~" i
}5 t; a/ d& ^! Z
) l# n# N% o% |0 o o3 s6 Q
socket.onclose = function(){
6 @* `0 N2 ]. B
`9 ?& u9 A+ M
//关闭WebSocket2 I9 V; m1 u8 p' i+ D5 Y' s0 R
$ h$ y4 |& I5 z/ a& L! |6 h& i) L
}
- ~/ ^' c2 [ h6 A: Q
4 e% b5 M2 A) Q$ z8 U
socket.onerror = function(){
" T- I. h% P$ Q" _/ o% A2 A; Q7 B! S
5 S% a9 A4 U; P I# O/ D# F
//错误触发
/ O1 T, e; N# B2 v8 F0 u" Y+ O
% p2 J* _3 X3 ` Z# B
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
0 B' Z& q+ T% |7 ^5 V/ J* i: t
<html>! @9 g \; I+ e; ^
3 q. {! ]& ]- i# C& j# f, K4 o
<head>6 _2 _3 Z4 g6 k9 O6 R# ?
<meta charset="UTF-8">: i: V7 _% ?4 V3 }2 C
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
$ }& }& i [' \" {
<title>WebSocket</title>, ^6 T3 C" k* Q o
</head>
' I# a4 G3 r* r7 P! [3 ?$ h
1 k' K+ g3 [( m7 c7 Z4 t' D
<body>5 t B2 c/ ]: T2 M
</body>
4 h/ a% j$ N2 X) n# E
<script>
, I; i! ?: v% I9 }) Q5 ?( w
var socket;
/ A! i4 Y, [- y3 Q2 C
if (window.WebSocket) {
. b$ U: B* _. C7 u, m) E" S* Y
socket = new WebSocket("ws://localhost:8080/myapp");5 K" c$ G s) q; D( D1 A* S: x, w6 F
socket.onmessage = function(event) {
9 ^5 J. i! X% b+ B/ ]& J( S* h
alert("Received data from websocket: " + event.data);* `5 e" G* O% G. y6 ?( C0 \8 J
}
$ [3 q& |* F# q: O2 i
socket.onopen = function(event) {: g$ {" N# G! V p2 ~
alert("Web Socket opened!");
+ P8 b; b& n1 N4 \- U
};
" e6 m' y6 M5 c! q9 \
socket.onclose = function(event) {
) b& g, @; V' _' b' @" l, c9 M
alert("Web Socket closed.");
) o, S6 E' L% s+ o( t! P8 t7 p: B
};8 m' O* K8 c; n4 g
} else {+ [& \9 _8 P" k' ~& f0 n o( Q
alert("Your browser does not support Websockets. (Use Chrome)");
/ \( G4 k. c+ L5 Q8 ?* e A3 `/ A
}
- l( g! z& \- Y/ p" ]
" D* J7 y2 T, B3 ^/ m8 s; Y0 s
function send(message) {
+ m: W5 }) N0 _ `
if (!window.WebSocket) {
, z$ ^5 {2 I$ X8 P6 ~7 E3 y
return;9 o0 l& M) t2 J6 p( A
}# ^, d3 s$ }; O, s
if (socket.readyState == WebSocket.OPEN) {
( \& v! q* V' @% o) K2 S% p
socket.send(message);# A) s( x% n5 r0 E+ H% }7 K" u$ y1 A
} else { l: b }, p! v, {3 Y2 s
alert("The socket is not open.");- C. h- \* y: ^, ^. Q, k3 }
}
8 N+ F c( H* I+ V7 ?; Q3 X
}
. i) m8 |% a: H" ]8 c/ [! u
</script>: ~0 C8 C Z6 x' r4 {
6 o- i- D. h+ H1 i/ a
</html>

复制代码

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

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

浏览过的版块