浏览器使用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:// 前缀。
1 \( I0 v. Y! K9 q% Z8 N) A: k" @9 j; F& p1 t, K

0 S! n* {* v; q) H: p M该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
6 m' B9 S5 `! @/ N% q* Z; V
}5 ~, X# W% j, i% B+ Z+ ^ ?( I/ o
) A$ u: K/ A( B- k$ E4 m
socket.onmessage = function(){5 ^" [8 z- o E; X' @* ?" r" H ]( a
//在event.data消息数据
4 S) `/ V b! B9 q$ p
}
6 S( d# w; X6 l* h2 A" t+ v. Q
& M1 B: P, z& e
socket.onclose = function(){& S# e$ V2 a7 e7 ^9 y
//关闭WebSocket
1 x7 V2 q7 T) w, Y; f% Y
}
. S7 m* l1 [# O' [; _! b- @
a5 ]7 A' z, O- Y* L- X! L+ }5 U
socket.onerror = function(){
/ T, b, V7 T" Q; O6 l V5 W
//错误触发4 _+ r' w6 D6 ^& s, ^
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>2 S! i0 W3 }/ W# [
<head>8 W- `$ g; q- X9 h
<meta charset="UTF-8">
# W4 e: @: w `- t0 {3 a
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
# j$ t Y/ D! K1 C) \
<title>WebSocket</title>
( W- e$ R+ G6 o7 O, w; s
</head>
3 Q% J% K1 W. F$ ]( z
<body>, ?$ a# r2 `# K0 o* \2 q- j
</body>
! T2 n) O2 E, p, [$ I! `; f8 ^. k
<script>
' R7 i2 d0 u% l$ ~& D4 B K
var socket;8 w" @4 D, x( S
if (window.WebSocket) {" q: G8 B c# B5 S8 j5 V
socket = new WebSocket("ws://localhost:8080/myapp");
* ^* ` }! F- `9 ?/ ^
socket.onmessage = function(event) {
/ {' @3 U% v' j5 N
alert("Received data from websocket: " + event.data);
+ s; m- d1 h4 j2 }1 Y
}
k9 d1 z4 B7 X+ }8 X
socket.onopen = function(event) {" _% O, G5 v. A3 L. Y4 ?* c
alert("Web Socket opened!");
& d: D8 o! d% E; c F
};/ q5 u7 K) A/ V* U* E9 g/ M% N
socket.onclose = function(event) {5 C+ R& U4 K& i2 F
alert("Web Socket closed.");
% U- j1 G6 j' a& u: F
};+ `+ _2 o+ j+ N! \1 q) S
} else {& p7 \& R8 o9 h5 x" ~
alert("Your browser does not support Websockets. (Use Chrome)");
1 k" D$ @1 K$ Z5 Z. s H
}" ?1 G7 J1 H- e, A8 B2 ?& u" N
: b" f# d/ ]: G* |
function send(message) {. R/ M. w9 C% t
if (!window.WebSocket) {/ z* y j( Q8 d. |9 X; N( i
return;& G* i) [( U! h" E+ c' X i
}
# E: w. w- D7 M( J$ @" v( w/ E
if (socket.readyState == WebSocket.OPEN) {
3 k/ e7 `6 i- \1 T" Q
socket.send(message);
) u- R0 q# ~3 n3 G" k7 u& i9 x0 @
} else {' S0 E/ o$ _! I. d
alert("The socket is not open.");* E+ h! S: A' i" ~8 k$ ]
}
9 X7 }: w0 U: G
}
/ u1 Z( ?1 |* i G, v! d
</script>- S2 W. d' c, `7 X
</html>

复制代码

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

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

浏览过的版块