浏览器使用WebSocket实时通讯

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

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

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

复制代码

$ C+ t; j2 h4 U; l! \
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 D, V+ Z0 X( k6 h
1 A: }+ I# d8 @3 W

# C( v4 x' S- V( h- t2 G该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
& {, f. z0 g, w4 s0 r# e$ i$ t
* @$ d7 ]: B; h
//打开2 i, V. f9 b7 p' p o9 R4 J
4 N1 l' g* c; O4 c$ ]; A
}
0 z1 k3 }6 M# ?
# O! X" \7 _% F1 p
1 N8 w- O; O+ o6 a* J# ?7 V
socket.onmessage = function(){
2 i0 M% |9 Y/ X: O5 g& u
& a7 b# W0 f4 j8 s
//在event.data消息数据
" m" p+ |3 B' V# `3 H" E! D
D$ p( J: D/ `) a* G0 S! K
}
' a+ e3 X* B, }' D& N% {( N0 F% `/ T
+ w6 j/ U+ |- J1 J2 P
socket.onclose = function(){
' o: e$ p3 F' Z- f
5 S/ i/ x6 j& p+ O5 |# U; Y7 h
//关闭WebSocket
( q2 j8 u7 B+ q$ n$ ]* Y
. m( U9 `8 X a) G
}" F3 P% z; W1 [
1 J6 z( s- X- }2 F
socket.onerror = function(){8 |- D1 H& h1 C9 ?4 `6 L
' D2 R: ?6 U% g8 \2 N6 s2 [
//错误触发& Q6 U2 a) N) R9 E
- P" e4 B. s# |6 }' ]
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>& z. _) @+ f$ X/ V4 n" b
<html>4 I; \; x, @8 n3 T+ T$ [: n
# I: [8 ^- Q, b* {1 ] \3 O/ U {( M
<head>
0 l& l) D3 D& F" {- L
<meta charset="UTF-8">7 L5 G: E) B0 b+ o4 `
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
' k0 I; P6 G" \3 C' I+ ]* m" E/ d, I8 `
<title>WebSocket</title>
$ {% g9 J7 ?& \# X. R b& ]
</head>0 R. P. j0 R6 ]6 Z3 f1 Z4 K
2 F" ^: L- N; @! _8 T" ^" q
<body>
) v; l) q6 C' c: Y2 ? j8 s' m
</body>8 J# Y! t: m2 n0 [+ |
<script>8 Z1 r" B+ T3 r+ C$ d
var socket;
# b u. A1 ~6 Z6 e5 i9 n0 V' t
if (window.WebSocket) {
1 z8 F3 x' D) g
socket = new WebSocket("ws://localhost:8080/myapp");
" C6 P$ V. u% A) M2 n$ v1 J
socket.onmessage = function(event) {
' F( P1 ]7 U" Y- L0 N i( Q3 H
alert("Received data from websocket: " + event.data);
8 ?7 \8 H3 q5 Z* \! q
}
n9 @$ T; G- f+ z) ^- V E
socket.onopen = function(event) {
6 w' x/ O1 g( |+ L' P8 H5 B6 _
alert("Web Socket opened!");9 p- Z4 H2 }/ z0 Q+ H
};! y+ Y4 A( Y+ U! ]- A* V
socket.onclose = function(event) {) p" T: f, ~5 p, ?4 G. _( K
alert("Web Socket closed.");
0 V H. m# o* M( i( a5 Z( |
};
# Q, B* J1 y9 k q
} else {
8 N% Z' B; V7 j& n/ H+ c e' Y U
alert("Your browser does not support Websockets. (Use Chrome)");! b# d9 t' h5 Q1 `0 E6 s
}
- J% w! g6 l( B( e" t4 |
3 ~! w2 j; u" w( }# L5 t
function send(message) {
. A% C& \; Y/ W( r5 s+ X/ |7 |1 [
if (!window.WebSocket) {& e* i2 |7 H/ O# g1 s# f2 X, Y
return;5 m1 O$ |) Y+ E) b, ^) ?: g
}1 y9 B! _6 m! G) a4 k; Q3 l( Y
if (socket.readyState == WebSocket.OPEN) {& `/ u6 D% d5 E7 l; R( ~+ F5 m
socket.send(message);2 `- r9 M5 z% L) ?' u
} else {
$ K2 O6 O v- h
alert("The socket is not open.");
, M1 U2 f: |+ q! B/ V
}
$ \$ u( j3 x" C8 ?5 |9 G2 [1 Y
}0 w! ] h" m2 R3 T. Z1 e+ s
</script>: Y' `) X/ Z! A; \
1 O; ~& u* g+ p- M5 k, v% P0 Q0 g
</html>

复制代码

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

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