浏览器使用WebSocket实时通讯

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

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

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

复制代码

5 }0 l# N. q3 O$ T( y; T与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 + |. n) z/ [$ F

% {- J* B5 N% i8 d& C M
; h3 e# F" A2 {' d9 }: r$ k1 l该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
' x& C- E8 J H' s2 x, Y3 K
2 G" A6 ? s6 {1 d
//打开
+ p z1 l+ G5 ]8 _3 D: Y
) Z. R4 S5 s8 K* d5 W# g/ _
}+ u/ T! i# y; k$ ]3 M2 d4 x
: w& Q$ z4 c. l* v" W5 M* k# l- ]. i
% f! J6 f0 E$ u6 l$ u
socket.onmessage = function(){
0 e/ T& M1 w8 z% B9 c5 Z
# j& j& N/ Y0 u i) r
//在event.data消息数据
. r g' Z* |1 `+ Z3 ^
, `" A# ^5 E1 b4 n f2 k
}$ }( u" c( m3 [7 G6 N: H, h% K
+ T; U6 ^! z* e! [, I- t0 x1 E
socket.onclose = function(){9 `# A ]9 u9 ?0 {- ^& u8 `
0 e5 s5 K6 x m3 k
//关闭WebSocket$ D3 E3 c; t! |9 U! m
1 }! i# N1 B) J- q4 p. P
}
: j9 n/ L3 H' p# F3 [# R( d
5 t0 n, z$ x, }
socket.onerror = function(){
+ W8 d0 u" J$ X& f$ L& O w$ e! ?
. R5 h. b; P$ ^0 X4 ]
//错误触发5 D1 m; i v8 ^# }+ ^$ t6 L/ K d% [
/ L$ X; o& g; v- z3 b! x
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
8 W E' S/ H" T+ ~ u( k
<html>
B! G( w; H5 G" r% N. _* r2 @
( J9 e" |8 g/ i
<head>* E, t8 I( \1 L z3 I+ i
<meta charset="UTF-8">! v; I* { s" n i1 U$ I
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">( E4 ^1 c9 m- a% n8 p( d
<title>WebSocket</title>3 q9 M0 b; z6 N- A$ B+ o: T% l
</head>9 K q5 f4 b ^3 M
$ J- v6 O0 K) e7 I# _1 C/ g
<body>: Y& p$ B! }- L/ s( |) \$ n" M" v4 P
</body>
9 ?. f" W, F6 p) K3 q( q
<script>
; S1 }& X' I' U
var socket;/ @# w+ Z6 Y" \( U/ U4 y
if (window.WebSocket) {1 y' l1 M7 c @4 d$ j- n
socket = new WebSocket("ws://localhost:8080/myapp");2 g$ s, B0 n# a4 E' Q
socket.onmessage = function(event) {
6 k4 i8 G- N, @
alert("Received data from websocket: " + event.data);
8 j* c# `) {$ b* p- F
}
& ?" W% o& @% o+ _7 O, n) b7 P8 w
socket.onopen = function(event) {
% e% t' P8 a8 j& @- M; L; ^
alert("Web Socket opened!");4 Q$ e$ d" i( j
};
" i" k/ K6 p$ [5 U$ C
socket.onclose = function(event) {+ j# l8 z0 X: f. o# s9 @
alert("Web Socket closed.");! S) M4 f& @# S2 p- p
};
3 |5 T: k# z) N5 P9 O
} else {
1 G) C0 O9 @2 ]2 j; N
alert("Your browser does not support Websockets. (Use Chrome)");
2 y' ?, }; L5 L% e5 L
}; r9 \9 H1 @/ \8 E7 W
6 K' Z) G; s0 Z
function send(message) {
( i; H$ [$ I1 C$ w8 H
if (!window.WebSocket) {6 Z( C* x5 K u* x. r d
return;
: o3 n8 H4 M+ z" G7 b1 l' |
}9 g! b, o( }1 j9 Q% j# U. _5 h
if (socket.readyState == WebSocket.OPEN) {
& ]" `/ c, A; _- ~1 G8 Q. A
socket.send(message);8 h# Y: c( F9 Y1 S
} else {) D+ Q0 h' c( T3 a T3 X. [
alert("The socket is not open.");
# l# N6 [2 |: Z
}
: a. B) x- E5 U; W ~+ b
}1 r3 k& n& O" v% p9 R) Y
</script>6 q: @' `. v, P/ j
$ T3 z* ~/ o8 Z/ X- Y6 T+ R
</html>

复制代码

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

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