浏览器使用WebSocket实时通讯

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

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

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

复制代码

+ `2 J5 I8 q: k! H: t0 |与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 5 Z, P8 r. Y$ y- D" Z5 Z

1 [' g2 _ \" b3 I& u6 W
( }9 Y/ D; D( p9 m该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
/ R5 n$ s! s5 Z: ?4 p5 K/ h
+ j; U# M. x: e. ^7 f+ [
//打开
8 q5 y, @6 d2 ~" y
: Y E1 H" R9 A6 ^2 I' }
}
3 l% P- U' b" F
% {0 f6 R, S+ t" l4 L3 P
: F! A1 M. i* l! S; a
socket.onmessage = function(){
/ a' x+ i+ w9 S- n& ]. G
& j1 p4 S/ q1 r- U W3 |6 P) q, I" I
//在event.data消息数据$ `/ l: ^+ _4 c: L
3 x" O9 b$ @4 Y: k: ]1 V
}
; j( E. {" P9 m0 }: V
, j; ?9 ]' ^% G$ B
socket.onclose = function(){3 J9 w# k& E# U5 ], M1 c
0 ^4 i0 ^4 c: p1 o2 O$ o& r
//关闭WebSocket; Y. v/ P, l) r' ?' e
- s# f5 a; F/ v/ B/ w) ?$ x
}7 i: [# [* a6 \& y2 I% E
9 R6 Z1 v F- [6 _* y: c/ }
socket.onerror = function(){. n/ C X7 L3 i8 \% V
. \, _5 T7 i. s8 C# T' _- E
//错误触发
& {7 T7 v- L% w4 |7 O
0 a# D2 y, l: a1 ]4 h4 p+ v
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
2 G5 o5 I" Z9 P' O4 F& Z: t
<html>+ q- v7 z* g! d% q' c
+ W2 p: ^& p0 R |0 C4 p" ]4 |8 p
<head>
* ?% X4 i8 Q; @5 c" p" ~: ^/ P
<meta charset="UTF-8">7 N! c) u6 g( @1 n" R
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: b2 k$ v& n$ a8 v$ Q' t
<title>WebSocket</title>
6 a, e! W5 o* l7 C
</head>
" i& g( a# R( F5 G6 W! G
) o# F+ S3 b; [4 F5 Q* I1 Y
<body>6 [& w* h' Y3 t8 m$ q, l
</body>
* y1 p( \; o% P/ V
<script>% G) w+ K. k- ~6 B
var socket;& ?1 J3 u) n& r
if (window.WebSocket) {2 @" T6 T/ F7 ]9 G3 x3 r7 I
socket = new WebSocket("ws://localhost:8080/myapp");* p) d* o& U. B
socket.onmessage = function(event) {
3 J2 h, x; k3 A9 l5 m7 Q) u) w
alert("Received data from websocket: " + event.data);5 r5 ~3 Q. B* w; E/ i. U: |0 B' |; V& V
}& J" u# U, d9 ]$ Z5 S
socket.onopen = function(event) {
! U7 A" _+ ~, o' M
alert("Web Socket opened!");
9 c1 ` q* O- a' _( a6 ?' a% Z
};, a5 e6 Q! f9 i( M% E7 a. \
socket.onclose = function(event) {
' g6 F: P, r4 ~# m, M5 }+ P( H
alert("Web Socket closed.");5 C% F6 k9 m6 x
};
+ Z( f, l C3 X& g* J& b( [
} else {
/ Y1 s/ j/ i. F1 e
alert("Your browser does not support Websockets. (Use Chrome)");3 Z5 o7 h; g0 q. a8 Z7 I
} O Z& P @4 N+ N( y- T* q
% q* y* ^' k$ y
function send(message) {8 j* G& r; O* h. m( ]
if (!window.WebSocket) {, c) i/ n1 b# M0 d; }
return;' h& U0 m8 B$ B# A: B
}
$ L8 Z* C9 K3 v* i( B/ @
if (socket.readyState == WebSocket.OPEN) {
7 m* V8 d: O. g: G6 i
socket.send(message);
5 D( m( C( @1 p
} else {
& W5 ^5 @- l& \" {& X
alert("The socket is not open.");
9 b$ A! Y" S, H1 m) v4 P
}6 d4 n0 H; q5 Y5 h; ?" U! j$ [
}
( R0 n6 T* g2 x5 c6 S& {' G8 ]+ {2 P
</script>0 b3 L _7 T6 u* u, _' a$ ^
7 D: T* ^0 z0 i/ s
</html>

复制代码

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

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