浏览器使用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:// 前缀。
& ]4 |4 K5 R) \" V' `0 U/ B/ N3 v6 W# P: G

0 R( T& k( }3 n' J: A& s$ l该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开( V5 j8 a8 w, x8 R
}
2 u, o2 o& X4 ~2 g5 [# d# p% X
( E& j+ V. T; H" s& b, r" F5 j3 v
socket.onmessage = function(){
1 [2 \9 d2 d: w) b% U6 p; h
//在event.data消息数据
0 p# B5 t& S# a, }: L
}
. O3 K( {, N+ B3 p" G4 z
/ ?: E" u( a0 x) I
socket.onclose = function(){8 X! T. b& l" @5 `/ Y# A8 s3 O
//关闭WebSocket7 O: Q# G& ?$ C) v/ u4 q; S* f1 C
}
! {1 f' ^' G) H
5 H# @8 p. r$ n# n! u
socket.onerror = function(){( j6 b( |, g6 J, g4 }
//错误触发" r$ Y0 B( n9 M4 x' w1 M3 F2 J
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>7 i" m: V* M; X+ C F
<head>
7 x5 [% K4 B% k4 V
<meta charset="UTF-8">
7 |1 P3 s' U5 C1 d
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">3 _% r9 K( d% Q
<title>WebSocket</title>" B% U: s4 l$ p7 E0 C
</head>; ~4 r H) G# T8 `( K4 v/ T
<body>
0 _& ]' d$ o9 w5 a( N! I* `2 ~* e
</body>2 P* _' Q6 Z6 r# f% E ?( O q: C" r
<script>
& e8 |, `; b I8 f
var socket;
V W8 E% ?7 f: \! Q8 i
if (window.WebSocket) {( \) I& R2 P6 c
socket = new WebSocket("ws://localhost:8080/myapp");
8 F. ^8 }4 S2 u6 l( C* Y( B: j8 X* g
socket.onmessage = function(event) {
) d5 L; t* ~! y( j8 k4 M/ t9 D6 B
alert("Received data from websocket: " + event.data);
! I% p# q7 k) W
}; a$ D6 \* T7 J6 f: ~. {) L! ?
socket.onopen = function(event) {
/ Y C! g7 A" n* W/ G
alert("Web Socket opened!");/ e' B5 p3 m' i1 ?
};5 M9 a( M' q/ }! U& y9 ]
socket.onclose = function(event) {
% x& c3 r, C* s1 A
alert("Web Socket closed.");8 Q# [, Z8 k: b' @( T) |2 ^
};
$ e% V' f" W: w: O% r) X/ B$ u5 M
} else {: ]4 ^( L$ h& a6 {$ R# p/ d
alert("Your browser does not support Websockets. (Use Chrome)");
9 g! c P3 y1 o9 V& z% _) P) L
}6 l* e) _, q, q4 q) Z
( R( ^* x/ q4 L, p; }% S- l
function send(message) {
j+ p) N8 u k5 a0 I C
if (!window.WebSocket) {6 n% j2 v" \9 q. V) Y
return;
4 B n$ ~7 g& [' Q2 N3 Y
}
% ]- i/ S% M `: Q! f+ j3 J
if (socket.readyState == WebSocket.OPEN) {
+ O6 v, b/ \0 @5 A) G
socket.send(message);) A! D p6 o3 _* ^1 b
} else {
% a- Y, e" l6 F: x
alert("The socket is not open.");8 g: Q% B5 B, Q
}
}4 l3 [7 [5 K3 G. ]) l/ R; v0 I
</script>
, F/ h# Z" Z9 j% Q( p
</html>

复制代码

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

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

浏览过的版块