浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-23 19:36:00

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

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

复制代码

与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
6 ~* H3 P, R8 _3 f- [* P0 R$ K& k
* J3 u; c' t T" H# q
% N( w/ A0 B$ A该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
0 ~" D7 E7 S$ j1 Q, t
}
7 n' \% O4 h. H: U2 Q$ r
, a; y8 B. z, A5 j, F$ b+ s; f$ s
socket.onmessage = function(){
7 T4 O; Q7 _% {6 w& h
//在event.data消息数据
: H5 I. X4 l" h1 K; A- p' Y
}
" s/ t5 \3 G8 I/ i5 @
# X: ?) }+ }3 O r5 G
socket.onclose = function(){ n. j/ I& `( o/ r4 C
//关闭WebSocket
; f1 B- [8 K$ k% \. e4 N1 B6 }
}/ |" ?# n5 y0 r( i4 L% ^6 v1 k
# {* C' W. ?8 }8 J7 Q
socket.onerror = function(){5 q5 S( j% L$ |' o4 r0 x7 {
//错误触发
5 {! R2 Z9 ?0 c4 a( d8 V
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
1 R: Z- g1 E/ C1 Y9 R
<head>
, e v2 u- }: D3 y) e" Z/ D" b
<meta charset="UTF-8">
0 u( L c, k+ a/ B6 A7 z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
! O4 a3 Z, P& D9 R
<title>WebSocket</title>% g& ?6 W3 B" O) A) ~
</head>
4 b' ^2 T A, q
<body>. U& I d$ C7 H8 n% C
</body>
4 [! `* U; \$ h) ~; R
<script>. m) s& u5 J- g3 b
var socket;
# I& @, m3 f6 x, t* ]1 i6 W, P0 t/ |
if (window.WebSocket) {
. A$ b6 U# k! Z2 C6 T
socket = new WebSocket("ws://localhost:8080/myapp");7 D$ ?% e# p- w5 q: y
socket.onmessage = function(event) {
: ]1 x- u+ ~6 S* k4 H* j0 U
alert("Received data from websocket: " + event.data);
/ l8 a7 {/ |! H/ X
}6 |0 a- b" E& M1 E5 t
socket.onopen = function(event) {+ }8 ]- f$ a/ S' Z
alert("Web Socket opened!");6 k1 \8 r0 \1 I: n+ [
};
) M# `& r- O+ C& |7 N: s' }1 j6 ~
socket.onclose = function(event) {, N! _- f* ~6 {' T7 l
alert("Web Socket closed.");
8 p" P) a; f* r! V! F
};
( O4 p- i! X8 D/ E/ H# V& k0 M
} else {# q" D2 Q- f# n: q$ e
alert("Your browser does not support Websockets. (Use Chrome)");
" D* p& h& N8 _3 x0 N; M4 G8 O: n; |
}
! Y% D( h' m! o" H4 G
- i; Q" z9 D, `3 D$ a% g
function send(message) {
# C2 g' K! I! A9 x) h4 S5 A% ~/ z
if (!window.WebSocket) {
; r6 |$ q2 w4 y( Y' F2 J/ \) x. y) _
return;3 D# p8 L# w( @) y" _, x
}
2 _/ x# v3 j! b8 S7 o' q
if (socket.readyState == WebSocket.OPEN) {
% ]) U3 E. x) C9 t0 }: L" \% H
socket.send(message);
5 b, W; ]. W) P# j
} else {" c/ I4 D6 a: p: i6 S, I
alert("The socket is not open.");# C; i' F! S- L6 k: q! [1 J
}
4 L4 @" R; ~5 l7 d* Z. `* P6 r
}1 L! f ]- i3 N. ~& W
</script>) a5 L6 X" w, `* |5 @
</html>

复制代码

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

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

浏览过的版块