浏览器使用WebSocket实时通讯

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

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

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

复制代码

6 G! @0 A- Y0 W5 K与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。 - U" J/ ?" `; m _6 j( P

# ` x8 a3 {! |4 d* S" N6 i+ C9 P( |* }9 I2 p/ g
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){* u8 _' h9 V$ m2 B' V2 s* z6 H
- s) y$ a; m3 o5 H- R L. i1 e
//打开
* ^: ]% q$ M+ K
4 L+ J) g( j% ~
}
$ I% y* B3 ~& O/ W
) Q) F0 \. r: F
+ B7 w7 G6 d. E) J, M' U8 n+ @
socket.onmessage = function(){+ J, t) w) d. K/ V, l/ M
$ Z0 H4 @4 G9 a6 Q6 Q: u
//在event.data消息数据: L( a3 r7 ] d
- {: y* [- x r- W+ ?: B
}; ~8 m3 n4 i# R6 f% c
. g8 G, x* k* ]1 P
socket.onclose = function(){
# V1 p' Z# z9 e5 |8 T- J' H
) p6 H/ i* j* x9 ]# ?. {9 V; ^$ g9 N
//关闭WebSocket8 c7 L7 X$ H5 ~ i5 [" J3 w' i
# s6 ]4 C. c' @) ~2 B
}
( K- K- T/ b! h* i7 _. C+ n
3 M0 w. |- L! q/ y3 f
socket.onerror = function(){ x6 G/ V) j) q2 L7 h
# Q7 V+ Q0 C5 b$ Y: P, N8 P: b
//错误触发& y* t+ s9 }) W5 M5 a$ A
' M! M# n- j+ I* L
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>8 J- U' T1 s0 y6 w
<html>4 D4 T' d, X# u
, X/ A0 p7 J: B# q: o, x
<head>1 }9 O' O) G; Y6 y) E2 |/ ]9 E
<meta charset="UTF-8">
4 t& |; [* y" ]% F) N; E9 R! _
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">3 `; ?/ P, _; O& w& _
<title>WebSocket</title>
' x# L4 G3 j/ {3 m3 V
</head>0 \ E( [/ T# C/ R! H
) ~$ K/ S; R, w1 U
<body>1 a3 n) d4 C: p8 l
</body> G# C. U; [4 C4 S! Q9 O. a
<script>5 x6 x9 }- a: d1 d
var socket;
* `5 }2 O) P3 m0 D
if (window.WebSocket) {( Y. Z" a9 z& h4 {" W
socket = new WebSocket("ws://localhost:8080/myapp");
0 R4 w- m" g9 E/ `2 J; G
socket.onmessage = function(event) {
9 {& |" z6 E- p" O; X
alert("Received data from websocket: " + event.data);9 m- [; B5 X- n+ y
}/ [ ~+ Z4 i6 p/ f
socket.onopen = function(event) {
9 T' }8 \% Y4 G$ J+ o
alert("Web Socket opened!");
0 t) R1 V6 F" o0 W6 T
};1 F) e) P! H* Y8 h0 l/ v2 A
socket.onclose = function(event) {
. @: N" w% r/ x# A" B
alert("Web Socket closed.");
: Q- k9 j1 y4 G- e4 l1 ?) Q
};
3 d( O# l$ N7 M( d/ f2 @
} else {- U) u) |3 p: r
alert("Your browser does not support Websockets. (Use Chrome)");
) X9 f0 f' ?: D. \3 |* f
}9 }0 X" E) l6 U4 o* `. ?/ |
( a" D) z' ?/ Q1 \
function send(message) {
8 H) o4 h" ], p5 M
if (!window.WebSocket) {
" T6 I+ ~1 w, t1 \
return;0 n0 S6 k# l& |+ ~7 l# ~
}) O# [1 P8 e% C- h4 U
if (socket.readyState == WebSocket.OPEN) {
& M+ Z1 N o2 z# d3 z: m3 M
socket.send(message);; r/ L+ [ L% D; Y3 D8 u
} else {* n* U/ t$ Y7 a- a
alert("The socket is not open.");
7 e; V) W, D& \' d' _
} G& A, ~& F' u# }9 L
}
! z- H! ~1 S j$ d A* t# N; G- C
</script>: a7 {' B- }& v% G2 C
1 K y W" K J7 ~4 P# }2 i
</html>

复制代码

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

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

浏览过的版块