浏览器使用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:// 前缀。 - i" Z0 J0 B/ n5 Y) d d, M

" D! A- z) m3 ~1 `- x6 {/ z7 t/ O) c, f# I( E3 |! {/ O( H( P
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开) n v' e% [! t! K
}- ?0 E u" ^* F9 N. n4 s
, ]9 w5 R x- l, v; e
socket.onmessage = function(){
( x+ ^- g( M% \" ]6 a9 T2 f( w) g
//在event.data消息数据" c, i ]/ J/ g! T8 v0 v$ X* E
}; t8 p0 H5 V2 C5 m U
/ G3 ?0 Q# z) |' T% ]( N8 V
socket.onclose = function(){1 s2 M1 P( G; |' f& Z
//关闭WebSocket3 |( D* D# K/ R' X( w" ^
}* X' @. X1 r) v M- [6 C
1 s9 E" }1 \8 z: T. J4 p
socket.onerror = function(){
: T4 W: `! U' Z, }4 U7 F% f; @+ ^8 z
//错误触发
8 o( R. W: q5 i& P+ r) |& {8 s
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
3 h- X7 Q! M0 e F4 a6 V
<head> p- T. w, H. z# _& n
<meta charset="UTF-8">
1 `5 M8 e1 g0 u2 z' |
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">7 X; ^. B8 u! E: K1 I
<title>WebSocket</title>
6 a Z" l" U9 W5 [
</head>
: K E; R- w0 E. [# l/ y* H0 a
<body>
% G: U' g3 D- w
</body>
( @% L" _: S$ g/ H; s0 H
<script>* X8 B: L5 k9 ^! w/ K2 x" x8 D
var socket;1 M: f+ ~. K1 ^; r$ E
if (window.WebSocket) {3 a/ K1 k* E. {0 u5 L% _
socket = new WebSocket("ws://localhost:8080/myapp");
. K1 i8 j4 x2 I! h% ]
socket.onmessage = function(event) {
: C" V7 A# Z5 @7 X8 S
alert("Received data from websocket: " + event.data);3 R z6 F. @- j' k6 q
}; @+ y" T* D( @& m: l
socket.onopen = function(event) {
4 u/ d& Y3 J) x/ V
alert("Web Socket opened!");1 E% t+ b. }# [* H6 b
};
2 g9 T1 E4 {" ?; W$ u& H- O; P
socket.onclose = function(event) {
* A1 P3 v& j! B
alert("Web Socket closed.");
% _* O# ?# h1 N! q$ t, ~8 }
};9 M4 ^2 U0 H& v8 l+ m
} else {
. G. Z% i! F/ a
alert("Your browser does not support Websockets. (Use Chrome)");! I! o- p0 h. W3 m; M
}7 c$ E; ^8 ^7 I
/ C8 {" h; ], q+ z8 S
function send(message) {
1 ^# E, q6 }* p$ t1 I; O8 o
if (!window.WebSocket) {
7 \' A2 f# i9 b/ d4 ^/ O" R a
return;
( S1 o" R3 m! L: l0 J
}
- B' e* w4 K/ Q5 ~7 ?( g& P
if (socket.readyState == WebSocket.OPEN) {$ K, z( w8 q6 C- c1 H
socket.send(message);
2 f* d3 g' E, Z$ G
} else { u2 P% \3 ]6 S0 Y2 |" j3 U! ^
alert("The socket is not open.");) n: R; h8 U1 ^" f3 A& M+ v
}/ B# \8 M) j7 r" s, i ?, ^: M
}* A* |* m# q5 }/ W5 j/ A, h
</script>
( ~ o+ j5 j' G3 C
</html>

复制代码

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

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

浏览过的版块