浏览器使用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:// 前缀。
! }% T3 v m% Y
3 e. ?/ B( g# U. m3 h% f% S) e2 g- k0 L/ ?& y
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开# ~' w, ` W% [
}+ q o, v& T e; T4 v! g( ?
* K1 F6 Q7 e: f. R
socket.onmessage = function(){9 P( J- q" p! E3 Y
//在event.data消息数据$ E" t0 h/ j: ]0 `# d# ~" M1 D
}
% |, A* w5 ^1 Q. ?' h# v
5 c3 `5 u# C5 D: |, i; d
socket.onclose = function(){ D% w$ W6 T ~* Q% ^. i7 S: s
//关闭WebSocket( S% c5 L' Y' _: ?
}* v4 p+ L$ K4 m# C7 ~2 D! P, L9 [
6 C, m* x+ ~+ M X8 W8 l
socket.onerror = function(){, i- v! |6 z% \% n9 B y
//错误触发# |( X0 c* F' x& |7 q
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
h) {7 G8 k0 U/ z. P
<head>
1 f. L! J. N. y% r y
<meta charset="UTF-8">7 D7 o* P$ A8 L
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">, @1 G T+ q- s
<title>WebSocket</title>( U( k; E* O% T' p2 b5 o3 w$ Y
</head>$ H, e9 ^0 r+ r/ @& [/ h
<body>
1 h/ U9 j4 `1 Z5 X- m2 D+ r2 e" H
</body>
- Z: u0 @- s3 ?2 S
<script>
0 } g I: T" Q+ ]6 p3 a# ~; C
var socket;6 B+ x# L6 O( V1 s( V- `0 C
if (window.WebSocket) {5 v) d7 g7 w) i% R, T4 S$ u) A' J1 @
socket = new WebSocket("ws://localhost:8080/myapp");
6 Y/ @" f! ]+ N; [5 I7 x; `
socket.onmessage = function(event) {" }7 i! |$ \( T! [' V& {9 n1 [
alert("Received data from websocket: " + event.data);
, H' Z1 s& R2 O
}
2 Z5 S3 _8 v1 O# |4 X
socket.onopen = function(event) {
* n' q5 A& Z0 x% a/ r: {
alert("Web Socket opened!");: D- j) r4 e- L' ]* W! ~+ S
};0 v1 P! L0 F1 q& z
socket.onclose = function(event) {
) F7 [1 U3 p) G( X& U1 {. }. \# i
alert("Web Socket closed.");
2 f+ }" ^5 I6 P* v
};
( C& y4 L$ q$ v0 O$ @: @5 U1 b4 [" I+ _
} else {$ g% e4 B' {; M
alert("Your browser does not support Websockets. (Use Chrome)");8 ?! `. C+ t6 j7 q
}, a* P, J6 [$ p$ I: T
( j4 _+ H4 R' Y( ^& J9 ^. [% V, b
function send(message) {
& J7 v% s" H, Z$ |7 m( N' ?# n
if (!window.WebSocket) {
1 x% A; k% L# ]' m
return;9 S( P' z8 B( e
}1 O$ L; a4 q3 D9 F7 `
if (socket.readyState == WebSocket.OPEN) {
0 a* K, i7 o D
socket.send(message);
7 c, `5 v/ h! n* Q) ~, w
} else {
; Q% t$ ~+ ^9 R7 r9 F2 E2 F0 m
alert("The socket is not open.");3 \' X' P/ }6 |1 _$ |
}: ~$ p1 Z5 u+ j& B5 R* i( l$ {
}
3 [; I8 f' t% z& Q
</script>
; a8 Q. t/ f# T; k" d
</html>

复制代码

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

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

浏览过的版块