浏览器使用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 b$ c( p  r7 \9 i. J与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
9 _+ X& y7 n8 t9 b* ?; b3 L4 x- e2 k; T) t5 j( U  z

" h8 p5 L9 a& J3 L& p  g: d该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
k) C* w9 B9 o5 x
; e# {- G1 V( J2 n
//打开6 Q5 n! k& f ~! t1 `
" m4 }5 w5 a: F% A' |2 E9 ~9 k
}
, x) y& w, @9 n/ U3 Q+ m
" g! y4 a: p- h, ^' V6 Y, I( s; p4 u
2 N9 e8 x8 }9 Y+ k" R1 M/ s/ W2 x
socket.onmessage = function(){
1 T" ?0 [) @2 U, C* ^/ d- C, Q. h
& Y7 F% E$ L" h* B7 X
//在event.data消息数据
- n+ O+ s( h2 y! C9 p1 N3 O
m' T& \" G4 j" o
}
, H2 w, q7 s4 J _9 M: e5 U
6 k! K9 F/ E0 ]: s
socket.onclose = function(){3 }3 c& x1 w1 ], N+ P2 a4 X7 W
6 V/ s2 ^; M% `
//关闭WebSocket: J; j0 @( h2 [' r# @7 S* I, \
+ S" z5 U9 |2 H' T
}
2 C2 W5 I/ j0 i9 R% Y/ a
- ~6 w# p3 `3 X8 O( O: Z% a9 k; | {
socket.onerror = function(){
* d( {2 m+ o! p" T( I# k9 h5 g% ]
9 ~1 C$ ~, e( ^ K! z) }7 @* q
//错误触发7 u, L7 U- H: y, N! _, Z
o$ u2 `" c% U6 \& s& T/ f3 N
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
- B5 `5 w& o1 ?6 p% {9 W1 B1 V5 m
<html>
. ]6 Y+ \, }7 Z% V$ ]- k
! f5 P w* M9 b L; k2 {
<head>+ g R" n z5 n5 X
<meta charset="UTF-8">
* f+ J$ g8 K r J4 N8 O/ y9 R( J
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
& E( t+ X: t" d0 Z
<title>WebSocket</title>/ y0 D- u# i& j
</head> j! a: Y, [& r5 e6 _
$ g. I& J7 ]/ d5 l' S2 O q, f
<body>
. Y( o, \0 u0 r7 n
</body>8 n( M' Q; h2 L" C+ f) q/ F
<script># s) G* k! B* r* s ^
var socket;
9 X2 W/ S( x( F' w
if (window.WebSocket) {* W6 k, q+ |& n4 h
socket = new WebSocket("ws://localhost:8080/myapp");
- h1 n' f* n; a+ Y. f, ~
socket.onmessage = function(event) {& U( a. v) S$ k7 J+ {
alert("Received data from websocket: " + event.data);
3 Q Y' j9 G% x7 r: t" J- d# ^. U
}
0 M+ B0 Z; ^- F0 f$ t3 Q
socket.onopen = function(event) {" j/ `* _! ]. F; I- r4 m) Z6 y
alert("Web Socket opened!");
/ z K* ?" C0 s V5 `! S% u
};1 Y# u, ? U( D) [, {, @# m# W
socket.onclose = function(event) {6 G& x) o' P. X9 u& o( h" W
alert("Web Socket closed.");
s+ J+ I: W' a ^9 \
};1 Z6 b5 _) R+ \$ r" y! M
} else {
1 C6 y! P3 U F9 ], }
alert("Your browser does not support Websockets. (Use Chrome)");
2 D' M% o6 R: i0 H8 L' v0 V
}. N3 P+ G o6 z9 l: {% U
, K' H6 e8 u+ V. n$ _; a- R6 O
function send(message) {
: `3 }) p! U* @) g0 J
if (!window.WebSocket) {
0 \& U: u0 p, \ H# t
return;. ~ e4 H# G7 T1 t
}. U7 a$ K7 i* |, b$ A6 [+ T @
if (socket.readyState == WebSocket.OPEN) {0 b' X. }, t9 O+ B+ G$ h
socket.send(message);& p |' |5 B2 r0 u T& k9 V
} else {
6 l( |6 _% }( _
alert("The socket is not open.");
) X. `6 r4 C" v2 s
}+ a% }4 i) X( A! b0 m5 W
}* U U* g+ F" q5 H( b
</script>
6 \' T) k& {4 W! Q5 s
6 M, R! T& x! |% H- a
</html>

复制代码

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

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

浏览过的版块