浏览器使用WebSocket实时通讯

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

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

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

复制代码

& z: B# ~1 ~+ i# j1 Q, v3 W
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 " F3 ]; K. p- t3 H* R
' v4 N- L) `7 f" x& q/ [1 ~

. K5 Y2 j# c0 F0 \! R该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){0 P# K: Z" l8 Z
Z+ x# u. X- Z$ g
//打开
7 }: ~ ^1 S: G+ Z1 @
2 t$ G+ |% T3 ?% g: Q- P3 v' S
}
" x9 p8 J/ f9 l: u9 L1 t
% O6 d, E, c+ a7 @2 G7 S
; K- S6 Y w2 M& Y& _8 z4 l) z# h
socket.onmessage = function(){
0 ` V2 A. T: k
; z! @ b7 k9 _0 ^9 M
//在event.data消息数据0 d9 z8 W: G4 `( ^8 l: T' H# p! x
( @1 n m. n0 |- t& \# x: C+ N. Y
}
, }( s1 i- w; r, q6 b* T8 R$ C. z' D
3 J9 P/ t! K! f h7 J
socket.onclose = function(){, M. m' J5 R- `7 o
' G7 Y1 }. e! e2 i t g, P6 y! \
//关闭WebSocket
9 n8 c7 q9 I9 `) q
3 S# _" D0 L3 I
}. S$ m, D7 n! o- H( k
* u8 t$ Z3 g) V9 i5 L5 _
socket.onerror = function(){
0 ^0 J8 r: D/ o4 f$ J# K$ j4 D
c9 A P( ^; }- b
//错误触发
" e/ ~+ Z7 B1 ^
( A5 P f: L f3 `. c0 Y
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>; J* f% \6 p$ [! e
<html>4 v7 ] ]4 E- n( h& ~4 e
# p7 }6 K8 f8 V7 x8 F. K
<head>
; F$ ]6 F; k* U' {! K, b
<meta charset="UTF-8">
8 r3 j; ` G* |( h$ M4 G: \
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
3 \4 n. @3 s2 a
<title>WebSocket</title>
; k8 W1 ^8 x3 n& C" P% u9 g) u
</head>
/ W! {( \0 [8 s$ N# k% p
m2 ?7 Q! n' r% {* G, g. e/ s( G
<body>
; _5 |! A5 \1 D+ a% U U. Z4 a
</body>2 c% p# f8 |* K* G: I/ p% ]- A6 }: X
<script>, a0 t' y1 z( y
var socket;
0 \7 G1 v0 ?" T7 w5 ]1 \
if (window.WebSocket) {7 l9 Y$ K0 F$ t) h& r
socket = new WebSocket("ws://localhost:8080/myapp");
0 \& z2 q5 w9 D- h
socket.onmessage = function(event) {
6 B! a" y& ]) h; S8 T& Q8 _
alert("Received data from websocket: " + event.data);$ ^) Q+ Z: ~3 d- K: z3 h, V; u( a2 M
}$ d( _; A% f* p& g* o0 N
socket.onopen = function(event) {4 f' W# ]8 k- H1 {5 |) B6 ^) F$ H
alert("Web Socket opened!");
7 w4 w7 ^- }, d! T4 y2 u4 R: z
};' x: i( `" A4 W
socket.onclose = function(event) {/ y7 R) {# m1 O; q
alert("Web Socket closed.");3 Q4 @! c' B* f
};
# }, t% z6 p4 s2 F% {# e
} else { |& Z. ^$ M% M
alert("Your browser does not support Websockets. (Use Chrome)");
& x* u+ X& t) m" M/ `5 w6 C' ~7 v
}
7 A; p) f$ a2 G/ T0 H0 e5 X- U2 K
" Y) _$ |0 r" ^( o2 G& ?( B
function send(message) {
2 b, c" {' _ D& {1 R' r
if (!window.WebSocket) {8 G. I3 g: f$ i
return;& Z; q' `! U+ ~
}$ H |0 Z' X5 q( C; B* }
if (socket.readyState == WebSocket.OPEN) {
% m% U5 z4 _8 z. F2 Q; C
socket.send(message);% A h% C2 W1 \6 H8 J
} else {
7 C- J8 w* K0 K i. b
alert("The socket is not open.");1 ^1 Z4 a) d7 ^: A4 G+ V% i6 }& T
}; _' X$ V. N+ t* W# ?7 x6 K& o0 B
}
9 g: O3 |5 `* J6 u6 g* b* i
</script>
7 @: k) r1 Z. f: ^% b# m; C# I
9 J8 B. k8 s8 N1 z! i
</html>

复制代码

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

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

浏览过的版块