浏览器使用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:// 前缀。 \2 o" m0 V, ~& Z

" j' A+ y' A$ C) F, Y3 n3 y
' H9 j, L. F! T9 s; ?该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
& ?. ]2 A6 Y( K- F! }* B; Z9 `" n
}
2 x) g+ h9 \; b D. o3 {4 c1 J
% t1 c( P/ q2 D( @. z( y& {
socket.onmessage = function(){. Q+ I3 [( o! ]2 b
//在event.data消息数据2 p6 `( [9 B' r7 H* M" H* F1 @
}
* @# ^5 U* m \0 {$ ?+ x; \! b
' ]8 D) x2 k) U* v
socket.onclose = function(){
0 @6 k+ U. e+ ^& W6 M& Q! y6 j
//关闭WebSocket
' u6 {0 O4 S5 t1 ~ \! D/ @
}
" S# W4 C/ v, P! b: o
2 R( ], T; m5 x+ \ z0 O
socket.onerror = function(){0 ]( i- x5 u2 t% c" w5 T \
//错误触发( O' }. \6 w! e8 S
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>$ J: m5 B6 C/ ?# `& U0 v
<head>
1 j2 V' `$ k4 g$ K% G, p5 y# p
<meta charset="UTF-8">: L2 S3 ~- T( Q4 ?9 q6 H
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
1 {+ j. Y, j8 k6 m
<title>WebSocket</title>
) | W* Q3 A$ ~- b# n
</head>9 K' H0 O) C- {5 e1 m) H" L
<body>1 k* `8 Z& O- `3 V9 _
</body>: {: A' R0 ?( O5 O$ Z: h8 C
<script>3 @* ?. S# s: ^( h0 }
var socket;' T; w# e0 V* o+ o2 {6 y+ z# K+ g
if (window.WebSocket) {
# X: N3 ]7 K& G" B, B: s$ y2 H
socket = new WebSocket("ws://localhost:8080/myapp");
0 Q' X" R; k$ H. @" \/ d3 M6 `
socket.onmessage = function(event) {$ H0 I' e8 z$ Z" y9 ~+ }6 C
alert("Received data from websocket: " + event.data);' g2 j& Y" {: W! ~8 F
}
3 j* h$ x# F# x0 B" x. w( T
socket.onopen = function(event) {
( i; V0 x1 V9 L4 j8 [
alert("Web Socket opened!");
! n$ S5 c5 |# Q! T+ L
};6 j; G. V; h3 Y; q" v
socket.onclose = function(event) {
% E, w% d$ T+ R& V
alert("Web Socket closed.");
! m' M4 D& p* @& F: e5 l
};( _! d$ F2 N; B: \6 k
} else {
( q. N/ V, P8 i5 ~+ n4 ]% J
alert("Your browser does not support Websockets. (Use Chrome)");
0 G5 z$ k# P' o7 R( E
}
! U. a" {) \! Z y& N
) T5 |% [3 o. C3 Q" P; X
function send(message) {) E) J, d! Z1 @% J' A# [
if (!window.WebSocket) {
+ Z7 M$ A# P* d- n. K
return;
S. Y c& [. R i K
}
3 r* u- p3 x7 O( w$ Z4 P
if (socket.readyState == WebSocket.OPEN) {
G, w$ x" Q+ s
socket.send(message);: \3 L$ w: T: P) ]1 ]
} else {& z$ p- J! ?7 y+ a w/ j- P1 c; s
alert("The socket is not open.");
K1 Y6 H! S C: {" p
}9 }( K' k3 I' |6 u7 D7 U
}2 i5 q9 s+ x& c
</script>) `1 x) B; S8 x5 D; { w
</html>

复制代码

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

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

浏览过的版块