浏览器使用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:// 前缀。
( P( p: o$ v! R# n& I
8 G: K6 g5 ]) g) \
( t1 Z% T* V; i7 F! O1 [该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开8 m' I. u2 s! L1 h
}$ l2 Q- n: Z/ c3 T0 p
0 |1 g% e7 H) G& r/ q+ Q4 Y
socket.onmessage = function(){) W) [! B# H/ k1 E: \7 M
//在event.data消息数据. c8 u {2 [) d5 `
}7 n6 u% F) N X$ C: D! \
0 ^; E7 r2 E0 X* j, H4 H
socket.onclose = function(){% h# g/ C$ ^" }9 B4 n8 V
//关闭WebSocket
1 _3 J Q8 z g5 v
}# K1 q1 T; d9 A" z g" q
, d' ?- }0 ]; Q
socket.onerror = function(){# w; Y7 n( g# P$ D
//错误触发. j- h3 G6 q$ _0 ~9 T8 h
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>: l, r, p& u, o- h! h0 S9 v
<head>
; j( d7 N- e3 K" C: ~, y R
<meta charset="UTF-8">
: P7 e9 Z6 p% Q, r- L% t2 r
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
2 o: v j: N2 e" @4 |+ l
<title>WebSocket</title>$ N/ ^" {& X8 b$ h; R. i) U# ]; R
</head> X0 W) Q! s( ^; h& I. j, A. I
<body>
6 x: \: s( f! C* {, x3 w- r, L/ R
</body>' a9 y6 B7 o: C
<script>
+ X1 F4 \5 y# G. J+ k
var socket;
, ]0 U# Y+ W1 b3 z( d3 w6 m
if (window.WebSocket) {
2 x$ d/ F- v' h* H
socket = new WebSocket("ws://localhost:8080/myapp");
0 c. A9 M$ d) d% v" I; Z, o
socket.onmessage = function(event) {
$ l1 p$ ]9 t X c
alert("Received data from websocket: " + event.data);
0 n# }. W$ o. {5 @
}
- W0 H6 q! w2 C% x: w6 V
socket.onopen = function(event) {+ f' v, t5 D6 Z
alert("Web Socket opened!");
4 b" F$ {6 U2 H3 v! I% C8 V W2 H
};0 X2 |9 J1 u# ^, z% U' [; P+ T
socket.onclose = function(event) {; A `& N' Y; X0 L) m& ?' ^
alert("Web Socket closed.");, ^! z) o, i1 s( ?
};
6 U" P$ W' U9 |. v i8 `/ l
} else { N0 ]/ m n2 @ t) i: X* z
alert("Your browser does not support Websockets. (Use Chrome)");
/ c# ^( h5 ~# u; \( ]! b( c
}* T% P3 C F4 p1 s% A
5 \' `; Z- Q7 u3 f0 g3 y4 ?
function send(message) {6 Z. Y6 Z* U9 S+ v
if (!window.WebSocket) {2 U2 F1 b+ F, I+ J6 t
return;
7 c% r0 n+ F0 d
}2 l6 g7 b, x- v9 p! m
if (socket.readyState == WebSocket.OPEN) {
0 |, g) t' i0 V
socket.send(message); [4 m, x' j5 W8 _( B7 P# p
} else {
) c o3 n" Q5 k y- m
alert("The socket is not open.");
7 i! e/ \" x( Y0 u3 H8 f0 z
}( g% `7 Q5 ~+ I# B# x
}: _* R0 h: F& u
</script>
8 [0 u- J8 F4 k A% u1 K
</html>

复制代码

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

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