浏览器使用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:// 前缀。
; v1 n; ?! F# }2 _3 [! q1 Q1 g9 Y8 z; C, T, t

) H# W1 ~. A9 l# e- E3 m该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
0 W" z4 @4 I" L5 Y8 {9 c5 a9 _
}; p3 d; ]' h9 S( I. P
% p$ [8 v& N- K$ i' j1 V6 B
socket.onmessage = function(){' a" I% ~, m8 C- D) s7 ^: S4 v
//在event.data消息数据
2 c7 \, u. {" j; b/ y
}
) Y; Z+ e4 V# f; V( ~% U, A' I
4 c& B: F7 Y9 B, v% E5 @& [
socket.onclose = function(){
. j7 m% Y& u% U R- J
//关闭WebSocket
: A0 s: w4 s6 O* y1 m! h# I
}
3 y: [7 h6 [. ]3 f2 z
: c; c) n# W- G' H% a
socket.onerror = function(){
' D6 A4 S* D, g$ i2 F! j1 I
//错误触发- a& z; H1 S9 I# T
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>$ M1 [1 W9 @8 {
<head>
0 N6 Y- l& F/ [" @2 D5 ?/ _ v
<meta charset="UTF-8">& c1 A. r6 \) B( B, G8 o- Z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">5 b7 n N$ r2 s+ O
<title>WebSocket</title>1 |8 Z) y2 o2 a7 n. u
</head># U( z0 y% g6 |
<body>
; A5 B5 W$ [9 G' ^5 d
</body>3 z, U& A1 n5 p# w: r6 g1 m4 e0 Y
<script>
) X: X1 Q' S/ F4 }& F; L
var socket;: ]- I0 W* D' I
if (window.WebSocket) {+ v. [! j- Y8 h$ l
socket = new WebSocket("ws://localhost:8080/myapp");4 K, ^# z$ c8 I3 {9 \' P/ l
socket.onmessage = function(event) {4 }2 G8 u& S0 [
alert("Received data from websocket: " + event.data);( ]$ M" U/ m8 G% u' ` C
}
b1 u% U" x% h& p
socket.onopen = function(event) {
- J; Y$ u9 k, S
alert("Web Socket opened!"); l. C3 k, Z5 z1 L
};
& S; c. x" {# W+ A
socket.onclose = function(event) {0 S; e- u4 d2 |3 |& f
alert("Web Socket closed.");
. Z* p# U3 d4 a( B
};- W" T. g1 g) c h( e6 w
} else {) X1 a: E( w+ {; U
alert("Your browser does not support Websockets. (Use Chrome)");
3 B' m @# \/ B
}
: [0 [0 s/ l0 L7 N" X
3 K* ~$ a4 `/ @4 [
function send(message) {
7 O) W& p" G# t8 a8 d
if (!window.WebSocket) {
; m+ K- g7 x; w: U- G
return;
4 x/ s' I& A# ]
}: J6 f2 e7 F$ B0 g H
if (socket.readyState == WebSocket.OPEN) {
6 K- k) \& {! W# Q6 B
socket.send(message);
! H5 X! ^; [* c
} else {
4 f) N# t2 s; m2 t- w" x# b: W
alert("The socket is not open.");8 O* X1 z4 S0 o2 z: r3 s$ m0 U
}! m1 z& z% l7 A) O
}1 V& Q: A4 T% M5 l6 J+ U
</script>/ c5 `2 F3 S. b. N; Y: y1 L
</html>

复制代码

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

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