浏览器使用WebSocket实时通讯

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

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

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

复制代码

0 }" z) e7 l* {* `与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 % I/ u* D4 V/ x1 L. E2 O) x

3 Z1 s1 x6 a% c% C, k& x+ N4 j) z$ p. A a6 W4 ~
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
( L0 s3 D2 m0 ~
1 ?. }0 O8 s0 g3 T
//打开6 [1 v2 A+ X' N6 u: Y i. e5 D( [
, }0 Y7 U" c" Z2 v0 {: s) k
}
8 c6 t' U( `1 |- Z9 D7 n, q$ L
8 V3 a, [# L9 O4 d* b
" d5 r [4 K1 H u: F
socket.onmessage = function(){
! ]$ @! G+ x, f
, K4 s$ T ~9 p9 W( F( H9 f
//在event.data消息数据
+ K! G$ o9 B1 u/ }- V) G$ h; k& H
( d1 w& x; Z i; X% \
}
A1 T) ^0 @/ o7 j
! `, y1 F/ {9 a1 U
socket.onclose = function(){
! ~. f7 e" y2 U! ?$ O
% w- G/ @; S O
//关闭WebSocket, \) {; x( g* G+ z1 R
2 |) N* e- A1 ^! u
}
# @6 a$ Y0 v5 B) ^
1 i* }- }$ Z, T/ Z2 i& k
socket.onerror = function(){! o4 C. T; ?6 w2 Y7 S$ s
8 A2 H9 s6 I5 a6 M
//错误触发+ `* ^% c3 `' R' Y* |6 u! r1 Q! z
! y1 h) P8 i0 g
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>
* A1 z( S6 a1 l9 j/ x9 d) g$ j
<html>
4 L. _& k2 V; ~5 z
$ Y6 ^: z* V4 K# W; {
<head>& _3 B, ]2 A5 ^, q
<meta charset="UTF-8">! T( F1 M: p4 J
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> X4 ^+ ]5 O) `4 C/ q
<title>WebSocket</title>
N T7 j; u: C9 I$ p# j
</head>
. X. Z/ H# e. X6 r! f# ]
1 `% i1 f! L/ U
<body>* o2 ^5 W/ |' f6 x" X3 _% y0 e
</body>- _4 M+ K. B- i: B/ z* \. H; z* u
<script>
, g/ ]; s" p: m! {, d" Y" }# q) f: K
var socket;6 i$ V: s* b$ {% I0 W! {
if (window.WebSocket) {& G2 L$ ^+ A$ q$ \2 R* f
socket = new WebSocket("ws://localhost:8080/myapp");
8 U0 v+ a: J9 m3 i, a
socket.onmessage = function(event) {
5 G- U Z6 p+ P9 v7 L5 ]9 u
alert("Received data from websocket: " + event.data);+ J1 u6 l ^; D n
}
5 h* }! D$ r5 m8 ^
socket.onopen = function(event) {
' |" H) E. R0 X4 x$ \) G
alert("Web Socket opened!");9 K j" S7 u% U* F, v8 M
};
4 _4 s0 }6 n# [: Q0 P* {
socket.onclose = function(event) {
- B7 k8 J N$ }
alert("Web Socket closed.");6 @. |8 f! V" ^" l. B
};; l y; }0 T! i6 X
} else {* C9 i2 D. w4 T4 y5 {6 ]5 d5 s
alert("Your browser does not support Websockets. (Use Chrome)");
. \1 a H0 }3 J5 ]- |
}
. P# a. h: z: p+ J
& f) v& b0 C- U4 W! s: Y* B+ E
function send(message) {
. z( q: @5 B3 f3 I$ g+ Q, }
if (!window.WebSocket) {6 |& V2 a3 K% K9 o5 D' _' v7 |- u- }
return;' ]# M, `5 |7 X& `# Y! v
}* I5 e+ Q' R5 D! r1 `
if (socket.readyState == WebSocket.OPEN) {- t% k" f8 b2 ^. H& J
socket.send(message);
* q4 a( F& e+ o" I- |/ l5 }# [
} else {
' N, S: N9 s, K/ {/ n2 e
alert("The socket is not open.");% Q7 z) v, j, C1 n8 M
}. C m9 T* x1 k5 X0 I* [
}
2 y @6 d0 I0 `8 d2 T
</script>6 A4 z) A# }" v3 g$ m
% a# O" Y% H6 J' z# g
</html>

复制代码

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

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