浏览器使用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:// 前缀。 7 Y6 C* a5 b. n1 L* F0 U

4 w5 |' F% \7 c1 ~9 N# s
/ G4 u6 x5 b4 p9 v, r- |该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
' E9 E J7 @* f4 z' Q: L
}8 A; U4 J2 H: `- C/ x5 c/ d0 p2 J
+ d4 Z0 h% p* C! ^+ b" e7 F2 n8 {
socket.onmessage = function(){
5 p" B6 k4 E; u& M. p
//在event.data消息数据& N; D, E" v# I0 `6 M. V( s' E
}
' V( ?6 x% E: C; v% |7 G5 O! _
- x9 a4 L8 @% w$ ~
socket.onclose = function(){) |* N# N9 w! C8 N+ h* U
//关闭WebSocket
w, M1 ?: H, a4 m" s& r1 q
}1 c0 k+ x' C4 s4 S; G1 L, A. I
# Z9 \2 M$ g+ b) U" a2 R) k% Q
socket.onerror = function(){
6 H6 s1 u* i, t3 L% f6 n6 O
//错误触发6 j/ R9 ]6 ?: d n: n2 J* R
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>. p4 l( j& D |7 o2 A% T
<head>
+ W3 w& z2 h! x+ [& M7 [
<meta charset="UTF-8">& u2 b, \' s1 n2 b1 \
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, |$ P, D" j4 X0 t
<title>WebSocket</title>
$ v8 o% ?. T( ?9 ~
</head>, g' n9 C# `8 p% K: @2 K
<body>
9 u: P0 ^/ c0 e2 Y7 I! N6 p
</body>6 L, F* B0 }" o) l4 z
<script>) q: \- l Z6 }
var socket;3 Y3 |- R4 p' F2 ^3 N2 @
if (window.WebSocket) {% r' ~8 w; y4 A- X
socket = new WebSocket("ws://localhost:8080/myapp");
9 L7 l" j+ _4 p) V; A
socket.onmessage = function(event) {
/ I) B! L. J' s% p% L3 [1 P- @; D
alert("Received data from websocket: " + event.data);& T" a0 n9 D% y* M) F
}; Z5 X4 A) K# S) P
socket.onopen = function(event) {! t6 v$ L5 u. m& C' ]
alert("Web Socket opened!");
4 M8 o/ j5 f3 K
};' ~. h5 X" Y } v7 n+ B/ C
socket.onclose = function(event) {- l5 ~6 o, d0 L, V! T0 [
alert("Web Socket closed.");
# K8 O9 o8 z' j% j2 G
};/ _" t- y1 S2 M/ n e! e
} else {1 Y9 O9 O1 T3 q( Q) A7 d
alert("Your browser does not support Websockets. (Use Chrome)");
6 ^( `$ V9 ~* c; j! ~1 [, b
}
/ w3 R" c/ _; v: t4 m$ R) y
+ L2 Z ?; L- N I8 J
function send(message) {
" t0 U) V, s ?2 x @" n
if (!window.WebSocket) {9 x3 @2 P4 ~9 f% [, e0 j0 V
return;- b0 H& R, i' B* } N
}
9 d. D8 l6 h% p
if (socket.readyState == WebSocket.OPEN) {
R- ^9 V6 U" u n4 H3 Y
socket.send(message);
y0 y) g9 N# f' X4 E4 W
} else {
9 ^0 `9 Y" s0 P6 L
alert("The socket is not open.");' L0 P& @% p# N: W* K% S
}
+ P O; p; \- h, \; ]9 U3 e' V
}
' p7 l d6 J/ t
</script>* L5 w0 q/ \, \$ m* a
</html>

复制代码

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

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