浏览器使用WebSocket实时通讯

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

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

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

复制代码

0 p8 @& Q, x9 \0 r0 ?* w: Q与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 7 R3 s6 `! x. _7 N5 o7 O

8 I# w2 n- h* S0 L1 h/ \
& J( n) _/ O+ z' S8 r7 V( j该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){6 G+ z0 l5 O2 j) |' K
# C9 M/ f6 a& L/ g# c+ L& ]
//打开
' U& ?) G: I' B6 f3 X
* L& J5 X# n$ o5 o D3 _. S' I
}
, C0 u+ R6 r& p1 S( n; ?" H
( z% G$ C3 w2 z' T! ?& B( G2 C2 e1 z3 C3 i
5 _/ ]( L5 `1 Q$ d8 L
socket.onmessage = function(){
- E) F) H& q* o+ {. v9 b2 B
8 V2 `3 C9 K# h
//在event.data消息数据7 P" B- D% O7 u* O* H& J; E
5 ~6 Q- h0 Q: p8 B& N
}3 h0 ?# \. Z/ }8 A! ]
. e. K* ?3 a% k. j
socket.onclose = function(){4 I( a; v: t$ ~5 \+ q
7 @8 U V3 a6 e( ]) B6 E2 z5 T, p
//关闭WebSocket. ^4 q4 w4 e; [* l; C
9 B) R+ b$ C5 x2 S* N: N- E
}
$ R8 |+ e' }2 x9 n
8 z) t' T" t$ M, i
socket.onerror = function(){* ^% d& l [: `7 q' a- w
. o- |+ c/ }3 f/ U
//错误触发2 E* s4 V7 l0 k# ? e1 z* b; M2 E
7 U) R- _: ^* p6 H: k' M
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
9 x. h! ?# V; ]
<html>: b/ }, l; l. j( h3 V* `6 D
" j8 q- W& Q. _
<head>% I* x# B. k6 z2 S7 ]. k D8 ?
<meta charset="UTF-8">; ` \6 ^9 a1 f! F) O5 N/ `$ o
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">' N3 u3 `* j5 H6 h: j2 U- V3 Y
<title>WebSocket</title>6 T6 J2 N8 h2 I+ u- U& O; z
</head>
4 |8 x$ ~& F+ \, s: m
4 l; u# Y4 U# c/ r
<body>
' g3 b; a. V, m- s `
</body># [! N {) Q$ o& K! u* r1 k7 S9 \
<script>
9 L' X4 i" O$ K# i; s8 Q( i" Y
var socket;
8 @6 T+ b' p( w: Z
if (window.WebSocket) {
. d# v" J8 Y8 E. \4 l/ M
socket = new WebSocket("ws://localhost:8080/myapp");& {/ I/ t8 U# g5 c" i
socket.onmessage = function(event) {
9 w2 Q- |( N$ J, R3 ?
alert("Received data from websocket: " + event.data);; \0 l/ k* V6 M# z0 x
}
7 u2 m% \# ~4 M- M7 O
socket.onopen = function(event) {3 w) D1 n* S z {- J- S
alert("Web Socket opened!");
: K: N+ h$ R; x/ _' {" q5 `$ s, r9 z/ {
};
+ H0 x6 J0 n/ ?' p- e0 J/ R- C
socket.onclose = function(event) {( W0 W$ H$ g' o# K
alert("Web Socket closed.");+ u! ~7 B" C: s1 M3 b
};% E4 R0 J+ A- Q+ F/ O
} else {4 ~' ^9 L# m" y' n' I; E! [
alert("Your browser does not support Websockets. (Use Chrome)");) i. q, F2 s8 b
}9 N( j0 N! G! v, `% ?
6 P. b$ I1 Z3 x* V, b5 ?% Y
function send(message) {4 x4 J* d: q! Z7 ]* A2 U8 O
if (!window.WebSocket) {% E# o p1 L9 f$ A. t5 s8 J
return;
/ S' I, V& M) L1 C0 N
}. m, b) F. R2 n1 y& }! X
if (socket.readyState == WebSocket.OPEN) {
( ]5 [% `, P; |; j* L8 Q0 \
socket.send(message);4 i3 i n; s; _& e1 Z# m. n
} else {
& R% U: ?, [$ B7 |, `
alert("The socket is not open.");
. l8 {- S9 y+ {1 R
}
, K4 @" [ N3 y
}$ \. N. m& B# Y; ?7 }
</script>$ Q+ q, v- J) [5 H" @
$ ]. W: y" U1 l. S) l* a! O
</html>

复制代码

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

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