浏览器使用WebSocket实时通讯

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

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

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

复制代码

" }3 _2 A+ c# ^! o3 u# g; [
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
# G! \7 P2 x! A! B/ L* H$ C
# T$ O* g$ x8 b. F* ~1 w8 U1 ]
5 D0 L1 z: v/ o该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
( a G+ K# w) l3 O+ T
+ y9 P0 ^8 Y3 L; H; ^+ S
//打开
9 S" o7 I# w' A
* O9 a: e0 A) c7 W" ^
}0 o8 ]( h0 A5 D' U1 |% f
* r' ?) }' [. x
, V3 V# [! j7 D; n8 m, x4 q
socket.onmessage = function(){0 F K: F6 O: y. x4 B( a. J1 z
2 o, P; S4 w1 A# d
//在event.data消息数据
; }$ h2 {9 j- Q8 R8 q, ]+ S1 B2 F
1 K4 [# j$ J# w+ ]- @
}
8 G& I7 s2 P* Q- Z; p
7 ]" Z1 R0 V8 E7 N; R; o/ z
socket.onclose = function(){5 B6 x4 V! j4 X7 e% X; K5 c* }; o, f
" m3 x- q6 Q$ Y- F, B
//关闭WebSocket
0 J0 l# \. B) ?3 l# W% O1 A* Z
" d" X' w" j- H2 j6 P9 q
}
! \6 L' y; n, s. [+ }. A9 E
& f" U3 W7 n- w9 ~7 P* Y2 f% p
socket.onerror = function(){
/ T6 x# H& k* j1 c5 {2 n
6 O( M2 y( F6 U4 ^
//错误触发
# w) X0 e) s( }' d& L+ \
% K0 D5 O% M% v8 |! s/ C9 \
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html> l( F! R9 [ X0 T
<html>* Z' i$ F* K/ F/ [7 ? Z. k, c; w$ ?
* h" L+ N6 J$ Q- s! v% X/ y
<head>
- W7 g0 Z" L; K6 X; M# X2 l3 h
<meta charset="UTF-8">1 e2 e* v! s6 l4 G
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
/ A, k, R" y+ ^, X! ^7 A! l% i: _
<title>WebSocket</title>
* g! d2 J" d7 N: j
</head>/ Q$ q7 i" ^% Q& h
{4 @# |+ W8 E/ s
<body>
6 |0 i' L$ e6 A# Q5 m; U" S7 ?
</body>
, i0 `. U. B2 k$ k. ^7 G
<script>* I9 p. S( M! s6 q
var socket;
! Y, X1 G. d! h( Z+ S
if (window.WebSocket) {
2 M. P$ n5 M0 O! j: K; e% w
socket = new WebSocket("ws://localhost:8080/myapp");( @* Z3 X5 C3 p" U( k& j7 E/ o1 e
socket.onmessage = function(event) {) D3 j+ x8 W3 m! {' I; A2 ?
alert("Received data from websocket: " + event.data);
* t5 z6 p% R# N) @ C: g
}7 X" t+ e. p* f
socket.onopen = function(event) {# y( r9 {9 c+ k) k; R- N* q
alert("Web Socket opened!");& Y% [( W0 Z: {! D% a ~
};
- ?0 C8 q; @: z0 {+ W0 M
socket.onclose = function(event) {+ A0 H" B" }8 B+ G6 J( F8 ~, }0 N, W
alert("Web Socket closed.");
8 g) _* ]9 {+ R" o6 v& [% h
};
8 t* V% y* s% i6 `1 }9 V
} else {" \0 q" s3 V+ D. b* C
alert("Your browser does not support Websockets. (Use Chrome)");/ O4 e" f/ j5 {3 r2 ~$ T) j
}
6 v' d f S, O4 E o i: N
+ y' j* i& H; f/ \
function send(message) {5 R2 u; z+ ]2 _) T0 p, `
if (!window.WebSocket) {" o4 h( l. o( X/ \' S* V
return;) z9 @- |2 [6 Y0 J: Z& y, b
}( O+ r$ J; V2 ~) P" c+ L* R
if (socket.readyState == WebSocket.OPEN) {
; Z8 s x: S, c* `3 `
socket.send(message);
4 z) H! R9 E" f0 P
} else {5 D! |- S/ U' M% e4 f3 _
alert("The socket is not open.");
$ |1 O0 r9 Z) } x
}/ ]# r% o. L7 U) @( l$ w
}5 D; @, \. }* f7 `# O0 R
</script>
+ { {4 K) z) E
; f# t# ^! q6 [6 E4 w4 ]
</html>

复制代码

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

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

浏览过的版块