浏览器使用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 G" J V3 Q, p/ K
7 b+ J( e7 @) d* N5 j; m

4 ?; @# L2 K" {该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开9 \7 ?6 [7 w0 x: ^7 `' y# o1 H
}7 a. ?3 {! G$ D+ N# k# i$ G
& |& k& i* p+ d& \
socket.onmessage = function(){
) m+ L7 D1 M7 i. {% @! n( J3 }
//在event.data消息数据' @7 k4 }3 L% d6 L( V. V
}7 q7 d3 r% ]4 a! {" w# [
* ~* h* v* a" B# \) l2 s9 R; Q
socket.onclose = function(){
' P# E$ d) n) }1 u9 R$ ?1 n
//关闭WebSocket, ]/ C3 A% C) S. B) ~+ V$ a! X
}
( H( D. C+ F U Q
/ i0 z/ ^, L7 r0 V
socket.onerror = function(){
- D2 Y6 {: k$ ^7 Y# H5 J
//错误触发
* N1 }: H% u' ]( X
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>& K* h* X, _! v$ V$ B1 W
<head>
% Y; B- \ I) \3 F- k" X
<meta charset="UTF-8">
9 O8 T# F) u9 w3 U! ^' P
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"># k5 d. a+ ^0 e- `
<title>WebSocket</title>) u! h1 U+ K5 w
</head>" z [5 \& H2 y
<body># \; @/ ^3 k8 _; y! C; d
</body>
5 p9 E: c& c" |
<script>
: ~) l; ?9 J V) g5 V
var socket;
8 H; j( i1 F& s# E2 j0 P8 Z& X
if (window.WebSocket) {
& }( l) g6 r9 |* p# y& S
socket = new WebSocket("ws://localhost:8080/myapp");
" m3 U% q% n t# D( g' u& V
socket.onmessage = function(event) {: a0 K& _3 ^8 R1 [) G
alert("Received data from websocket: " + event.data);
x M6 Q# c' {% N, X+ Y# U* S
}/ c* A4 C0 b2 W
socket.onopen = function(event) {
1 {2 x$ }! z& Q% H9 c5 E' q
alert("Web Socket opened!");
3 A4 o" o" s) { X- f* h# b& A
};( K1 I6 h0 \8 F! |6 D7 f/ ]" X
socket.onclose = function(event) {' z/ }7 O4 ^8 }6 L/ t! n2 E+ c
alert("Web Socket closed.");; G7 g+ ?8 m1 q/ _/ b" i0 d
};7 y. k. b/ E, g* b4 m
} else {7 K R6 M- w- f* N
alert("Your browser does not support Websockets. (Use Chrome)");
% M( b4 i; J0 R% y! O) D( u# y
}
* |5 n) G% Z# D2 D$ F
* D c6 o7 C5 n4 `3 d( h% L
function send(message) {) Z' a' G5 i' p
if (!window.WebSocket) {) n: O8 Y$ g( k5 z
return;9 z7 A0 n8 q q
}
" A% x; J# z4 k- L q1 X
if (socket.readyState == WebSocket.OPEN) {
: x- \# e! _% f' b3 u, p
socket.send(message);9 b) K8 l5 v: R/ }. L5 r
} else {
) M7 V/ N5 M# X% A. V$ j
alert("The socket is not open.");3 E! h M. H; i2 k6 u' M
}, M" x8 Y* S8 o5 Y8 {. x5 z0 o
}
$ ~9 m+ t$ N' q
</script>
0 {; I9 h' O6 K" {5 f3 W7 @
</html>

复制代码

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

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