浏览器使用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 g/ l& Q* A( m' X7 Q
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 - o2 i) m" C- q. y
; c+ Q, n7 T/ v9 K" w/ i. Z
4 N" I% m! r q7 P* a
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
* s* F, H6 ^" v4 F
6 R, E" X/ I- i! U6 n
//打开) D0 Y3 A& P6 i3 y z9 p/ w
- M: N. `% W# ?0 s& \, S) s
}9 P1 I: N, v# h+ D, \2 l) C2 E
5 F- ~) F2 B1 ]% Z9 v9 S4 @
) o# Y8 q& l, |" o: F; q4 k. e
socket.onmessage = function(){
5 p/ d8 e/ @' @& n* k
3 j3 }" l- E! H( b# a3 y1 f
//在event.data消息数据6 N: P9 H1 J/ C
* L* f( x- v0 a9 q- r
}
) m1 B/ j5 D1 _- s* Q* K
: ~' v, K( X5 X V# J
socket.onclose = function(){
( O ~1 h$ \7 Y' H
( q7 n& S) s* |) p; f
//关闭WebSocket. |) i) \' d4 A) B# B. B/ c Q: }
4 S7 s2 r( B1 y
}
( V3 r- Y7 @- o C) R& Q
1 V; c5 b+ v2 u0 }6 L
socket.onerror = function(){" }5 }# @, z, K3 C% ~8 j
F' n6 H- i& k- u" t; t5 y
//错误触发" ?- b. w# L" O$ x: v! L! l% ~# E( I
6 a/ r% R& W! s) ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
; T% N" [/ o2 J3 |' D8 Z
<html>
' X' |! _& q D: G& Q
( G- {+ ^( N* G: ?+ _# j0 g4 F
<head>; ^) q( _8 U% i% [5 p
<meta charset="UTF-8">5 Y- G& @5 Y( ~9 F2 K |4 F( }! V
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
; w L6 ]+ [% K; K3 G% l$ P, L
<title>WebSocket</title>2 H, G/ D' Y6 y: G: ]
</head>
7 u, m3 m' k" E+ J7 h0 v% A4 V
, A( ]" A9 W4 t* R0 k
<body>
3 e. Q* Q# s, y5 m
</body>; l2 v a* d) e' r
<script>3 h; P& g# B0 e! d! H
var socket;
2 A( o/ d" f2 U: ]7 O7 t# k
if (window.WebSocket) {% f7 N9 J1 U. h0 a+ z4 g
socket = new WebSocket("ws://localhost:8080/myapp");
3 W: d; h; |3 p* Q8 i
socket.onmessage = function(event) {7 Y2 K" K# ]* e
alert("Received data from websocket: " + event.data);
. V5 s$ q4 z5 M
}* C+ E2 A4 C* I; i8 q
socket.onopen = function(event) {2 |) O7 `5 h6 [( P; w
alert("Web Socket opened!");3 `: `, T' U& d+ |
};3 v; I- z+ t0 F! `3 t* i
socket.onclose = function(event) {; V- s( a0 ]' a8 q% A2 t
alert("Web Socket closed.");
4 e6 l0 i Z" g h8 v# f+ l
};' R+ c( f% e5 S7 Y1 H
} else {
, P$ L7 k5 _8 I/ p
alert("Your browser does not support Websockets. (Use Chrome)");
4 J# ?' p: H9 C, V. W' r
}
/ q9 w' [/ m' A
# s# y# V5 x2 [) h- ~
function send(message) {9 J0 m2 r9 i% R, R4 S
if (!window.WebSocket) {
1 k9 ^; P$ o4 v( B8 C* A
return;
) q4 L% M8 v2 k! n! \
}2 l4 h O4 _4 a! V+ |
if (socket.readyState == WebSocket.OPEN) {
8 B4 O& S( m+ k$ j
socket.send(message);+ |9 K3 }& F; a; S8 U) Z; h
} else {
) Q9 P0 ~6 J& f- r, U, B
alert("The socket is not open.");+ s" p. B: {6 ~+ M3 \6 @
}
2 V- H9 I4 I$ G2 }6 ^. ?8 Y
}
9 r7 u/ }. b9 v6 l& \
</script>
6 w$ w) I n+ h$ S2 P& V
3 d( m& }* h7 C g( b& \ b5 M& S
</html>

复制代码

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

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