浏览器使用WebSocket实时通讯

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

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

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

复制代码

8 h6 R4 T: }6 h
与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 7 l3 _+ f- F8 y! X+ D, I7 l

+ M/ j# e- I2 u$ n r
0 W0 A: H% I: b4 J) m C" B该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){) d9 \3 m- P7 p+ S: e/ N
+ I$ n w5 x1 m: k; I
//打开0 y2 n* U0 A. A7 |
2 o9 R6 _# p) |7 Y5 g
}, X. _- W) s }7 |) b
0 G) u2 w6 f' Q
% R0 U+ e- _* M9 ]8 a; j
socket.onmessage = function(){
+ I0 u* d Y9 }2 `3 h: U) X5 L! Q
& w/ e/ s8 z" k2 g" w$ |# e
//在event.data消息数据
# ~4 F; W) F2 }
5 h( I8 f4 q, [1 F& J& j
}
; G+ h( M0 R" L2 s% j
@* p/ J' y8 P! l
socket.onclose = function(){- U- b' Q; M# W! F$ O
' R( i1 P( }9 B
//关闭WebSocket
' @3 j% b3 e& L" T
% |0 [7 j0 i i8 x
}
9 d$ S6 w" d" t% ` d# p
( ~: ^0 Y; e- h& `& w1 o Z6 v) F2 K
socket.onerror = function(){7 Y+ w2 I+ _9 Y# ~' _
% N" E" U* S+ v* }: j
//错误触发
+ x' n% M- U' m8 K7 B
8 ]% b y) t) S4 i! k8 [
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>. i: |# f4 F1 U' l9 b$ Q8 ~0 X
<html>
+ l' p, p4 H( s: n. ?: e8 D5 l
- Z) j0 F5 w% h" e; b
<head>
" U! [+ x( v5 k5 i
<meta charset="UTF-8">
- d6 [. M/ ^1 s
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
: C W1 s* Z( V* F7 Y
<title>WebSocket</title>8 X3 ]8 |- H% K8 I2 A$ y7 r
</head>
( m, s! e& n1 u& }4 o
: \* i ^4 g# i! q; o+ U
<body>! o- S1 e: t+ U+ q/ @0 ^0 `
</body>) Y' y! D6 P6 U% o! k5 e
<script>0 t; y& b1 x* u- B
var socket;
) o) a* P7 ^! b7 m" P; T$ k
if (window.WebSocket) {
- V3 l8 L; M. h* a- x
socket = new WebSocket("ws://localhost:8080/myapp");
( `& w) c& ~# Q7 g( `$ R
socket.onmessage = function(event) {5 J# q( e, I9 B, J6 O/ d K+ @
alert("Received data from websocket: " + event.data);
; V# ?; h: w% Q; E9 G+ m
}! F3 H5 q( b1 z: T' R& P9 P$ K; g
socket.onopen = function(event) {/ D- ^0 r, d4 t* V/ V S
alert("Web Socket opened!");4 U3 p& F2 P' o% I1 {. S# F
};2 V T$ T; v% S4 q% P
socket.onclose = function(event) {
* m) j3 A# A- a$ @0 Z! u
alert("Web Socket closed.");4 G5 r [! U# n, h- H
};
$ j v$ ]2 l$ b
} else {* p% S( W" V9 C% p" Z" E
alert("Your browser does not support Websockets. (Use Chrome)");
8 u3 G& m) @6 E
}
+ w9 G, n4 ]* o) e- m6 ^* w
. I4 ~) A! o, @/ U0 A1 {
function send(message) {8 g/ |4 U* C7 g; y( l
if (!window.WebSocket) {
. |5 z, Y1 ~" n. w @# N
return;
4 C- ]7 U6 a" D& ?0 \: M; ]4 @: q
}0 O% v$ F5 Y- ]0 S! M( }2 N8 W+ E3 e
if (socket.readyState == WebSocket.OPEN) {
% n8 r, ~) r$ w3 l
socket.send(message);
5 K! Y8 z$ u$ Y4 s: y% C7 ~: R( ^
} else {
3 `2 @- f; O7 O# C5 `
alert("The socket is not open.");
) X3 `$ r3 z3 Z/ |
}9 v9 m* ~- n# u' P
}7 i) k2 ?3 _( s5 w" f2 G7 v
</script>2 s2 ^: E2 o( e& b# a! ~
0 O: ?1 q V: ]5 |1 R$ B
</html>

复制代码

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

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

浏览过的版块