浏览器使用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:// 前缀。 % G1 J* |* p8 p2 B
! d: T5 C3 |9 v9 [& J1 U% ~
/ s% {. [) Q( r
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
7 k2 c @, l8 p9 Q$ D# c
}
7 H' k( K+ [# i M5 z; G' d
4 `0 T# W" A; f3 v
socket.onmessage = function(){
4 c( r; A' Z; S; j+ M5 f
//在event.data消息数据
# Z3 s( }3 w4 O3 C
}
4 k0 ~0 M& x _# o7 D
9 r& Y2 D/ a# A4 r7 U5 T% F, Y Z
socket.onclose = function(){2 z$ X9 T! @0 x" ~" f' S
//关闭WebSocket
+ X3 v; Z! I9 j% b
}$ K9 ]- T- Q. @
6 h5 E! m: h4 G. @ R
socket.onerror = function(){
, L6 T( u v# l
//错误触发7 H+ ?, e$ _: u$ B
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
: x4 Z: p$ {: h! l1 z, N
<head>
0 ^% O0 U4 X, ^6 x# b
<meta charset="UTF-8"> F6 z( L: i1 E$ k0 k. Z, n
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
% a# v8 U) [$ W2 O
<title>WebSocket</title>6 d* a3 R' U0 l9 M: J/ [& Y
</head>+ U& T4 H; M$ P, N; |
<body>
' A1 {! A: n& T5 v* H# M. h/ G( R9 \- i
</body># V8 w- D3 B& C; _& ]) m: a \
<script>& Q+ Z: R5 j, M) k+ O, K
var socket;
3 W) N/ r' P8 G" @
if (window.WebSocket) {4 ~6 T( S/ |& m* m, U0 Z
socket = new WebSocket("ws://localhost:8080/myapp");( p% a, Y) n4 n8 g' u
socket.onmessage = function(event) {* A5 [- o) l4 d- L
alert("Received data from websocket: " + event.data);
7 Q* E) K$ F3 u3 g
}+ o* z, _/ n4 ]/ m( u
socket.onopen = function(event) {8 U# s/ |: x1 c9 C' g. m" r& }
alert("Web Socket opened!");7 a4 g3 p; e3 S5 p) U. V* Y- S
};
* O1 B8 w) A. u2 f
socket.onclose = function(event) {
4 |; g# o( c: Y
alert("Web Socket closed.");
1 X- Y" ]( n& T' c* y& x, X/ \
};" {$ p2 _# h* c& ^: e8 |% h9 p+ L* W! ]
} else {. `' l" m! U5 v6 ?! a4 j3 g
alert("Your browser does not support Websockets. (Use Chrome)");# m5 T1 A3 c2 _
}4 \3 i. T$ Z2 }5 Y# _# E
2 b3 K; d7 @! N! D# y5 W
function send(message) {( q4 j4 v5 q' B" K, S. u2 N
if (!window.WebSocket) {
( c$ G n& K, [; z+ d" T) m
return;$ ]$ H& w( ]' Y( i, [4 U
}' \ i# P+ O; S/ y
if (socket.readyState == WebSocket.OPEN) {
' K: Q: x) k! ~' J, u5 A, x+ Q
socket.send(message);
_8 |6 L: U8 f! D+ W* H& D7 C* w
} else {
3 v4 R; [/ Q/ U' \6 H; v, l$ l
alert("The socket is not open.");8 _- f8 s& R1 r* n) `5 ~) ^. N; l
}9 w6 E, _9 V$ M# K4 b# p. h2 k" y9 l
}8 }& ^8 F) Y6 ~7 z
</script>1 L% L% i% @( k, O" L; u5 U
</html>

复制代码

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

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

浏览过的版块