浏览器使用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:// 前缀。 & H) u( s3 f0 D6 y- K ]' n& L
6 t/ w' b, @4 J2 f f
) D- Z% y$ ~( k4 Q' U1 T
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
5 R9 j% r- U- n& V
}
* r* _6 E8 ?; K c4 U* U) W
) k, ]9 }7 m% T0 W# \3 q9 X
socket.onmessage = function(){
7 i4 g( K9 w% D# u; w
//在event.data消息数据1 q$ Y3 O- k1 D7 A/ u
}
" p. R2 Y% `4 C8 r
" s* v7 g. T3 L# j% f
socket.onclose = function(){
) ^" S( }8 J* i1 h( i5 A* F
//关闭WebSocket j s% d8 @' C$ F D( I$ B1 T8 k
}" t# r7 S3 d" e a/ z# K
; U# M9 a3 ~3 }. u
socket.onerror = function(){; Z |% H, G) _
//错误触发
8 Z$ W7 t; \6 l- Q- q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>& @! U7 z1 K" l( }* k& F% N. R
<head>+ G+ c' i; w! m- Y; T
<meta charset="UTF-8">
% u; g% L3 ^' A
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
2 m u! Y; f" o6 \% M4 O: D
<title>WebSocket</title>/ ?7 l* I) @+ ]' f u: R
</head>
: P: j$ @/ ^- f
<body>
) y* I0 S/ w, h
</body> {* Z% F3 U4 }8 J; h8 T- q
<script>
( A0 N3 x/ d% E; ]7 I0 s# Y# V
var socket;5 E/ }8 V0 x. ~! B: h1 S- `
if (window.WebSocket) {
4 L; E# k8 c% N$ M y
socket = new WebSocket("ws://localhost:8080/myapp");. u6 d' V( _+ i8 T2 v# D
socket.onmessage = function(event) {
3 M6 a/ c) j' g1 Q( N% k
alert("Received data from websocket: " + event.data);
$ P$ [4 Q$ E3 \; Z$ c
}) }3 o v/ c( u8 }8 J
socket.onopen = function(event) {
! m/ D" _& P, G7 V! s
alert("Web Socket opened!");
: E, P; D5 c# `3 n8 t; R
};, b% `( `! }$ Z# {2 h9 @
socket.onclose = function(event) {
$ |& d1 o: Q' a4 _# k
alert("Web Socket closed.");
" T! K& l/ T9 O, `6 r9 m
}; F% l i% u5 N+ ^& k, N
} else { @" J4 @# H- \9 x# F- K5 I
alert("Your browser does not support Websockets. (Use Chrome)");
7 `( ]3 @' k9 P! L9 Y
}
4 y. s- E: v& G: d1 @. j+ |
function send(message) {
3 C! w. {6 ~, L# D6 k
if (!window.WebSocket) {
* u' z/ f1 N& K9 Q! J
return;
5 ]7 G6 Q7 o% ^" g) z
}& X2 S" w; X2 _, N% t
if (socket.readyState == WebSocket.OPEN) {
) E$ m; A2 n5 `1 l
socket.send(message);
5 c! F. k- P! d0 G# @
} else {9 d, b: s$ v2 s& y' f5 T
alert("The socket is not open.");
7 ~/ i8 ^1 P- L2 R1 J& A, B
}& l" h/ p G' m: R' o
}
9 ^ m6 _% |% ~% O8 G
</script>% F& X0 t# H' ~+ I0 I
</html>

复制代码

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

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

浏览过的版块