浏览器使用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:// 前缀。
$ j: H7 T0 s3 K
- P8 ~' o3 W- c) K% w d6 W; |6 k! Z9 ^0 p9 w* j
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
/ T% F q% n: N& }3 L2 I W
}' }& G. k! P5 H1 I+ P
) M: i$ L$ Y; C; A& N
socket.onmessage = function(){$ |6 q- `: j! X/ @; z3 D
//在event.data消息数据4 M5 h2 j+ S" W% G1 N6 X- u- S
}7 M/ i: H) q% E2 F N! C7 X# h# [( T
5 N3 L8 G* ]! \; ]
socket.onclose = function(){$ X7 g/ i8 i0 c
//关闭WebSocket' _ A0 b( p4 I5 q+ P0 W
}
2 v: w0 J T" ]( _/ n8 Y/ v3 {+ @
; u4 d2 I! Q! s9 _
socket.onerror = function(){% \* G# x& p2 v; |6 y, q: f
//错误触发
$ p: G/ S3 o# `8 G) g0 L" c0 [2 F
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
$ E0 [0 w$ N' E$ T0 b
<head>) q( G7 X6 Y6 K7 }$ z9 Z
<meta charset="UTF-8">% T1 H2 F" Y" @8 ]1 I! z1 C
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
2 s' X0 ~ x. D; I* }- N5 k' y
<title>WebSocket</title>$ i8 T$ \! \4 p% d& c8 X% A1 y
</head>6 ~- F9 Z2 k& F, p
<body>- a. p; `( d3 Z: w4 F- e; P
</body>
@! M" j$ h3 I+ x3 L5 |$ L
<script>6 D/ G& o o& i
var socket;" k1 y+ A/ N, x3 v, p% a( D) b
if (window.WebSocket) {
6 O9 T; s4 c7 n' z3 \$ y
socket = new WebSocket("ws://localhost:8080/myapp");
7 p+ r9 v* ?8 L5 \
socket.onmessage = function(event) {
) x1 }$ c$ E1 v+ D d/ v
alert("Received data from websocket: " + event.data);$ }2 f& ?( F$ ^ _
}8 w) ^4 P% G$ e7 d2 \
socket.onopen = function(event) {7 ^# C' y2 I+ `7 M1 \/ O
alert("Web Socket opened!");
* ]) l( E4 z4 `% M5 ]
};4 `( A" B8 N$ m4 F+ p
socket.onclose = function(event) {
* t! h" A! l; [
alert("Web Socket closed.");5 ?+ X/ I9 d& v' ?7 i
};$ S: o2 H5 D6 q% w' F
} else {7 T9 H0 f* V5 f
alert("Your browser does not support Websockets. (Use Chrome)");
: S& o8 t* _! T" | N! i6 `
}& i2 J* R1 X$ Z
! q! E8 s4 q! F; g( _ V
function send(message) {: I" `" V8 f% e2 q1 z
if (!window.WebSocket) {
2 ^- ?7 Y4 H. I0 E }, r
return;
# |' @ {2 ]! I7 J! i$ W
} ~" z8 H. K T* ?
if (socket.readyState == WebSocket.OPEN) {# E; U! E7 v+ X" A8 L
socket.send(message);' U$ L. q) A0 W* I* u0 f& j
} else {% W9 }1 m L% i0 w* Q! V
alert("The socket is not open.");
0 b( Q/ D8 k* H+ x% P2 L; ?
}
# M( E; k# f" {6 m) D
}
1 Q5 m2 {+ F$ n4 N( m: o @
</script>
* ]( `6 |. x$ h L- r" i$ T
</html>

复制代码

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

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