浏览器使用WebSocket实时通讯

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

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

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

复制代码

, g3 u+ W* M5 l- H5 o% x
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
% a; v0 {& _2 m! Q/ v
" q9 f6 C& y0 y$ d( p/ ~
+ V. e( a6 F0 j4 ^# @该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){1 F8 @. m- p& Y9 n; {4 g
! X. z. V& ^2 j# T
//打开
2 r) f9 y+ k8 n
; N) I; G7 K( W/ h0 K3 f2 ]- H
}
p* U* T1 }$ N! ]) Q" I
/ C% e" B$ t* Y
`0 K) H4 F6 f5 v c2 `
socket.onmessage = function(){
( D4 b$ I; r* y: |: m
' w% y2 P* Z6 W- W; d, t2 ^
//在event.data消息数据
$ J* J% y4 h" N+ n* @3 H# D a
3 t9 b A; f$ r; l$ C1 U7 s y
}7 j; H) l' z0 e
/ ~- ]' P2 ~3 B$ z
socket.onclose = function(){
* c* b* b2 T4 w4 P1 G" z6 U
9 Q: s9 t; G, c" m6 i7 a8 }* y* u0 a
//关闭WebSocket5 Q. C, N$ I w/ u
9 s- q I$ I# m0 n7 X
}
) j5 w2 m* k2 z4 u; |' C
0 F, @- @) I0 H o `2 P
socket.onerror = function(){3 [% t3 `4 V( \& P5 u3 m
, C+ _" ]5 {+ f( x
//错误触发# g/ y5 \) @1 A, o
8 S& ?$ _- }1 U) M! G
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
5 n/ u0 \6 u P2 y) |
<html>
! _ b4 w! j5 x% m0 |
2 `! d1 M% N" s, R8 g
<head>) |+ e C& P7 j% K% {
<meta charset="UTF-8">
, m" z3 v# `+ _. G
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">' I a! q# ~- ~ y% R/ v
<title>WebSocket</title>3 ^0 Q/ a( R G$ f8 N; x
</head>, p; O% q5 P9 W" n9 A; s
. f+ e' @; }7 Q. `/ g
<body>8 q% ?& z2 L$ ]. U+ @- T
</body>( O* C- t' `, B! f
<script>* @/ |* e- U: Y
var socket;
$ ~8 i7 q1 z$ p P8 r: p( S
if (window.WebSocket) {
. W; E/ K5 c0 N
socket = new WebSocket("ws://localhost:8080/myapp");
$ G# k. L% G" k$ M. m9 Z- y; j
socket.onmessage = function(event) {- a: F+ b) n0 z/ U
alert("Received data from websocket: " + event.data);
# }' s. ?5 R, G3 w: L
}
" l9 l) S/ i% Q: L7 v H; y
socket.onopen = function(event) {4 k6 G R* R7 p' v; V% b9 G
alert("Web Socket opened!");
6 v# G1 q; b9 J; U' ]
};
' G. ^, v1 a( L' _4 h: B% [
socket.onclose = function(event) {1 q8 q* J: |( D' i" p
alert("Web Socket closed.");' X. ?' J, F7 l
};
' F; t: F5 }8 N2 Z
} else {
8 [* L5 S! ]$ M: ?8 P/ h8 m1 i
alert("Your browser does not support Websockets. (Use Chrome)");; i. ^% p) z1 R
}* G& ^0 c" W T& A( U
) I& R/ l+ O; x* [8 @7 j
function send(message) {
( E& `: `" |) O: R% Y7 a3 \
if (!window.WebSocket) {
3 V/ S( z+ @- u% E% R. ?+ W$ H
return;7 t; ^6 M4 t/ i& L9 @1 {
}# Y/ m5 p) o( X
if (socket.readyState == WebSocket.OPEN) {! O t o: p* `% w" b% ^
socket.send(message);
6 U- ^7 e) r; }
} else {+ C% k3 \. c) g! C4 ~! p9 Q) ~
alert("The socket is not open.");
- ]6 g0 Q- v7 ?2 k: J
}' T! P+ Q: k g, ?+ e; A4 @* F: s* T6 w
}
$ F2 ~/ n1 ?2 P: @; L/ H4 z- f
</script>
3 L, ^1 n+ ^4 ~% d& }% i
7 i$ u, J, j! O9 O4 J
</html>

复制代码

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

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