浏览器使用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:// 前缀。
5 y3 U. u; a) ?5 c
) {' a; i; y4 P' x6 z) k
2 q2 I n$ z& A8 w$ j( o该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开 ^' c# {' |2 \/ Z2 w
}* d8 O3 D+ @1 E" w$ `* j- C9 k
# @+ J: X" \; b% A
socket.onmessage = function(){
0 D* d& v* @% f& q
//在event.data消息数据
2 x7 s+ E: e( J
}! B" d0 d `! Z2 u
( {/ u( W R9 N7 R' `
socket.onclose = function(){+ N: K/ L' f! H
//关闭WebSocket' Z) x8 L8 ]) A
}
7 U: g b/ M a: }4 O4 [) Z5 q
% J' z m! k8 |( L) }& e
socket.onerror = function(){' p' p M9 d2 e+ a
//错误触发9 Q& I' O v) S h
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
# h4 f3 b: ?7 s7 g: U
<head># f- H" C" F/ m: ?$ |$ O1 J
<meta charset="UTF-8">0 _- _8 c- `0 K7 y3 I2 Z0 G0 N
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">' x9 N1 C3 K( a- Z/ j) I/ X
<title>WebSocket</title>% Q8 B5 k. T4 L
</head>
3 S8 {0 H" L$ a' i
<body>
: ?8 `7 K. D# v3 ?2 Y+ S0 \8 [/ E
</body>' G, @5 E& x! g6 q, m
<script>
, r. A! ~: O% Y3 _8 @
var socket;
' c# b7 o: U5 R& X/ [
if (window.WebSocket) {
' p# Y6 L7 U( ^
socket = new WebSocket("ws://localhost:8080/myapp");
# I9 k1 s) Q/ F/ W! m$ n
socket.onmessage = function(event) {; q. y- Y' {. B; T% i, X& ~3 s
alert("Received data from websocket: " + event.data);
! N7 | D. g9 P* u) y; o
}
! b' o$ }- _4 s2 F
socket.onopen = function(event) {
* K" c' F$ I3 t
alert("Web Socket opened!");7 Q+ X9 D. v' h w% H
};4 d$ L8 g- _) y& z
socket.onclose = function(event) {/ w2 g) c* v$ l9 ?5 c2 R( M7 T
alert("Web Socket closed.");
z5 ?* g3 c( Y! D- M, R! S
};
3 V9 }" t1 [0 L9 K0 t. {/ M
} else {! O, L) o5 X1 S( Y3 Q0 q' m
alert("Your browser does not support Websockets. (Use Chrome)");
- l( r+ `2 c3 r+ u
}9 q s: R3 M' I& I o* y" m5 [2 x- e
; _# g% B, O- M# d1 F
function send(message) {
( B' F# q' a. F# p! n4 D
if (!window.WebSocket) {! C4 s' D# t# P9 O4 T& m0 o
return;% P; A- g7 f% ~! u! J
}
1 Y# |7 e0 Y6 ?9 p! l( k1 h
if (socket.readyState == WebSocket.OPEN) {8 L, r9 b( {. f
socket.send(message);6 z8 e0 @. O. i2 \/ w0 R' h3 N) m
} else {
0 d6 p% M3 `. z- k& x
alert("The socket is not open.");# j9 [# ?, S `: K& x- e
}9 j3 X+ y0 r* z p" c& U7 [8 Q; ?
}& P& ?3 G* W# [# g5 r9 u, P
</script>
9 b7 U9 G7 q- i0 j: @
</html>

复制代码

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

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