浏览器使用WebSocket实时通讯

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

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

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

复制代码

; x' E7 N9 A. S1 q! _+ D0 A与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 ( P8 i9 `/ I m, ~7 q p# m
& ` B1 L% `0 h8 Y. L9 a9 v Z5 K# B

" q* M9 R5 z6 D4 R+ F4 }+ h3 J该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){2 q# k3 W! P ?1 b3 t, K
0 s7 s* [% J$ M z! W* V& T$ U
//打开
& ~% D# s; j8 M
( V/ @3 s( z* s5 U8 U. s, G: n; b# A
}, H6 s. ]2 X, E$ `. ?
. T; B4 \0 u" r# q- v. w$ D
f; E8 j3 G% j, E9 _; \2 }+ ` d. y& G
socket.onmessage = function(){
9 R) \5 C) s4 H! r3 s: J0 W2 p
6 X7 F" q- \7 j! f: n& _3 u& D5 p
//在event.data消息数据* U& Z1 A4 r' Q6 G3 i
3 b8 v8 f" r% f! M$ ^) A' O; `
}! d/ i' z8 O; h- j$ n
# n a! ?8 X$ T) A- L, H/ _
socket.onclose = function(){
8 m A( w4 |% J- L
2 U$ J5 s X M3 x
//关闭WebSocket2 X. c8 v4 c9 ^/ d4 z+ c% v; p
3 r; U0 L/ Q. O8 z' r" c
}
. `; _/ U' k) ^3 X: ~; ~' I7 H
4 t( Y/ d! Q- k- R. ~4 D; h
socket.onerror = function(){
8 R7 f. m% C `2 [+ ?% N& n/ T
) m' o# e/ Q* v4 G4 C0 `, @
//错误触发5 |/ V: T+ y- G1 C3 E
) N' u! Q, }' S, ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>5 Y5 k7 z2 W1 d& \% j# G# s8 n
<html>1 S% ^- E& B, q; _
5 }9 V% Q$ I$ y7 N# D
<head>) T) D# F/ x/ B/ z( [
<meta charset="UTF-8">
" W) y, E! ?7 ~ N% O, |
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"># {' ` ^2 |6 S2 W9 u; d% N
<title>WebSocket</title>2 e2 ^" R1 Q, [. e- @
</head>
# I; p8 d- a* @9 R
9 O( [' O3 ^3 C8 x% W+ h
<body>
- Z8 M0 P# p3 y- @# i
</body>6 S) N$ f* F3 M/ |2 @; Z
<script>, V. X$ [7 Y3 f; n
var socket;" U7 R4 Z! n- i/ Z
if (window.WebSocket) {
5 k% h! s) {# X
socket = new WebSocket("ws://localhost:8080/myapp");
% Q- G1 N) `& E! V% H; M
socket.onmessage = function(event) {: Z. w. X' |5 s5 ^5 U
alert("Received data from websocket: " + event.data);" ]$ P3 C7 |; @
}
9 Z) }' |: K! F! c
socket.onopen = function(event) {9 E# t5 {% ~/ K) m! l
alert("Web Socket opened!");6 c7 T" I6 y/ H+ P! C( K7 b
};
* B" s& G7 o, o/ X8 F$ W
socket.onclose = function(event) {
. K/ ?$ t( D |0 i- |* D
alert("Web Socket closed.");
0 |+ K+ D q: R2 N1 A7 L, ]$ [ Y
};& `# i# A/ p x% N/ M5 K) F
} else {* ]+ u. Z. a/ a2 G) W) Q5 @
alert("Your browser does not support Websockets. (Use Chrome)");
) p, M" u3 H0 N. b1 Y" D, P4 H& \
}, N' Y' S! ^( q
; j+ h( h; z! W, t) @- f
function send(message) {0 ^. R5 r# q; L! I- @7 a4 r
if (!window.WebSocket) {7 h3 h- n+ F* U8 g& y* h
return;
- R* l2 `3 W) _0 w
}0 q! o- x7 W4 W: X! q) J3 P+ [
if (socket.readyState == WebSocket.OPEN) {
" u5 c+ |+ w/ y. c9 w
socket.send(message);0 i; M# j& d. W4 V+ D
} else {* |, G( J8 k* [4 O
alert("The socket is not open.");4 V4 L8 F4 \1 A
}
' ?3 W" Q7 \% t. y6 K
}
+ N7 T d, o5 `
</script>! Q B9 g" H, f& P7 e+ n; b+ f% f2 z
6 l) @! a$ W4 H8 s% V
</html>

复制代码

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

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

浏览过的版块