浏览器使用WebSocket实时通讯

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

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

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

复制代码

9 ?- L F e: s7 R7 x! B1 F) C
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 3 ]% l1 c2 ?* }! |3 o
- i0 y* @. y8 f5 [% f

" v( ?4 c$ q; W该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
) C* M4 c/ e4 W }& m) ~5 ?
3 @* }( p9 G9 x/ f! |! k" `
//打开/ Y8 F/ {0 r$ @ f" k! K4 W
- m7 {; R3 B0 v, [! k
}) k4 ~: Z: I- r4 k. @ @, B! ~& r \3 c( g
- z- T/ r: @3 J5 Y. h$ @
1 q6 K y3 ?- e2 v/ t& O
socket.onmessage = function(){
. Y# D1 z$ Z X4 v' z7 g* @: ^+ h
8 V2 R% W- }! I
//在event.data消息数据+ B+ t; ~8 w( h
) t* @! j6 o( R0 V
}; |; ~* m0 `0 E" O9 B9 Z1 Q
: \; r+ x7 m. N
socket.onclose = function(){! k1 f2 O. w) F: M0 h; k( m9 n
7 k/ Z% L# S6 l# B2 @: r6 [
//关闭WebSocket }7 Z/ z9 C/ @; v4 q3 {& m+ K
C$ }% B* \6 x0 |" l
}* h) |! A2 T! p9 C
- b" ?/ t) n& V! Y: {" ?4 J
socket.onerror = function(){
3 _1 |2 Q" |3 e
5 k& Z: F. z _: n& f1 E& [
//错误触发2 F) O/ Q" L$ X* ?% Y7 H
# E+ J) `4 l0 D
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
* R8 `" W) \, r. Q0 I" M9 V
<html># ~' t& b8 [' | c3 L
, E+ G; u6 R7 z( S$ T) x( \
<head>
7 j; e+ f1 O1 o. ~% ?3 K. @& D9 x; c3 \
<meta charset="UTF-8">
4 l( W' U% U4 v& f8 I9 N
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">5 d& z$ ~2 n8 L3 s
<title>WebSocket</title>6 t, P% k4 @9 c; N& X2 k
</head>
# Q) x8 M) N7 y* Z5 ]+ \( p5 u
: [1 q& m; V9 K+ G3 r3 N
<body>4 W$ g0 z# w* h% h' v6 n' O
</body>) n( ]3 Q: G" u) ?! v- w
<script>
2 q+ {; K& a, H* [: s0 a
var socket;" @; [2 }; M8 G( X9 D
if (window.WebSocket) {8 M4 O+ u) Z' j3 Y% P0 l
socket = new WebSocket("ws://localhost:8080/myapp");. Y7 t6 H, v) P
socket.onmessage = function(event) {: o3 E, W3 F5 q0 I1 S
alert("Received data from websocket: " + event.data);% O- ?5 q; o) V _) H
}+ v, d" v9 \ p9 G) w
socket.onopen = function(event) {
3 e1 I# [/ X5 B7 I" @1 C3 W. m- D7 V
alert("Web Socket opened!");8 l* D0 l9 K+ a
};7 x# Z" h/ }& X" J$ J
socket.onclose = function(event) {( [! A4 @+ {- M+ ~7 [
alert("Web Socket closed.");- b& R& d0 }) [" H5 s5 q: [
};0 k8 V. T6 g. m; _
} else {
/ T- A+ |3 {9 U6 {+ _2 r
alert("Your browser does not support Websockets. (Use Chrome)");
/ ~9 A3 G1 E# u% W: t5 }6 }' g/ t
}7 O3 l# u' F9 s1 y( j9 `% P4 ?. z
; [! H! J. e' _0 {$ I7 x$ H4 Y
function send(message) {0 l2 N, D& f) H$ `0 q0 i" A
if (!window.WebSocket) {
) b3 c9 _/ @- J' `
return;
. j" F; _, H9 ~
}" w0 ^5 q3 b+ Q6 H/ C
if (socket.readyState == WebSocket.OPEN) {
8 f9 L) N/ |# ^$ w0 I
socket.send(message);
- F8 L( ~! S4 S, U' ^
} else {5 p, Z8 m1 w8 w4 {
alert("The socket is not open.");
8 N5 r7 w o. h( ?. {
}
. D5 z7 q" J# u7 @8 A
}
0 u' k* S m& Q5 v, w7 ?8 y
</script>
* r0 o, n' U9 _* L2 g3 p! _
T3 @. s' V7 z
</html>

复制代码

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

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