浏览器使用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:// 前缀。
, E. u4 Z- J0 O
. _ E w f- w* i/ ?( _7 S, m6 P, C
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
4 p [, o8 c; F! S; _- Z
}' p* Z" }* r& j3 ]& L+ ~
- K6 t( }+ ]+ |
socket.onmessage = function(){
8 }! N! P5 t- G; B4 E, `9 m! s4 \
//在event.data消息数据( L9 f3 |8 w! F8 O
}) ^3 A# [4 |! r
6 k7 J& L5 K6 x, z0 t, V
socket.onclose = function(){1 S8 h' @7 d( j; m
//关闭WebSocket
8 x- _: ~7 T9 O( j, O1 w
}3 c# ~. n5 ~; {
& _+ P0 T; F$ B7 g u; ^1 U
socket.onerror = function(){3 K$ J5 |0 X" c5 t- _1 s2 u0 h( V
//错误触发: u) B: {: ~$ q& O
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>9 D9 i! ~& Z1 N
<head>
2 n' H( w; e& ?4 }$ h3 g0 b' ]
<meta charset="UTF-8">
8 {+ [ @- {% v% y: k' P- [
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">5 b- j' O5 f- E' K# s2 @
<title>WebSocket</title>
. N* f' e3 o' N) Q
</head>
2 W9 C+ @. _3 J, D
<body>+ @" U, r7 t. U
</body>* f8 }9 y4 k. L4 c$ o, x( Y
<script>) a N3 n! x, c/ Y( y
var socket;, a8 ^# N3 o6 y0 j6 t
if (window.WebSocket) {0 y$ D* W3 g) B& i- S+ O6 |' L9 ^
socket = new WebSocket("ws://localhost:8080/myapp");
% I) @. T, ?8 c, h
socket.onmessage = function(event) {
# ]- F( p6 c0 |+ F: i
alert("Received data from websocket: " + event.data);
# ]' K) B# h. @
}! D" X* `# B3 |) w0 M) E
socket.onopen = function(event) {: H3 v4 g \) x4 A& q7 _( N
alert("Web Socket opened!");. e' E) C! ^; `, ]! i
};
! i' c5 j$ b J& {2 D) {
socket.onclose = function(event) {
5 n: r9 P9 X V8 n+ c' N2 a# C3 a
alert("Web Socket closed.");
z% D# R n" P% e" k
};* A9 ~* g. z: J( I% C7 ^! g
} else {
& x+ a. I: j( ?- ]" _5 u4 I5 y' S
alert("Your browser does not support Websockets. (Use Chrome)");
7 |0 D+ e: b2 T F1 X% |% e3 }
}
6 ]7 z5 P0 e- Y0 q8 x
( y8 O2 E" y8 k. b2 Q2 \/ |
function send(message) {- y+ [% ]; w4 ^' p
if (!window.WebSocket) {
' [9 M$ F7 j$ ?; R! E" g
return;
/ X9 G6 \- `( T9 l
}5 p- y. H# K5 q7 g
if (socket.readyState == WebSocket.OPEN) {! [9 l' i* T# m3 E! x- j3 n( ?
socket.send(message);
8 i" v9 f& w/ D9 ^! Z
} else {8 W* |5 ]- f3 Z# {% k+ X: V; B
alert("The socket is not open.");
+ R8 s m6 Y( p
}
7 N. r/ Q6 S7 r/ l/ V$ A8 i. m
}
' M s, J# o+ c+ h+ F% K! R
</script>! h* w/ \# ]1 b
</html>

复制代码

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

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

浏览过的版块