浏览器使用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:// 前缀。
" ?; |: ?1 Z# \7 C
1 w3 [, z) |2 U
& E1 E, f) `* c4 s) ]该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开
% q& B3 S/ M S1 P1 r8 D" _. [
}2 t. w! K) _+ s# m
& F" b6 J1 l) Y
socket.onmessage = function(){: h1 s5 r3 D! m( t- N' A
//在event.data消息数据. G5 k: t# O4 r/ }
}
* u' t3 w$ E, K& V8 O* o
^% g; J/ f: i) H) `
socket.onclose = function(){' D: D5 ~, v5 C, e- L
//关闭WebSocket
. ^; _9 f8 g+ K" V# h3 d
}1 I# y7 n6 N8 O
0 E- h6 D* U1 G- x
socket.onerror = function(){
+ k* g$ R8 p. [5 i ~
//错误触发9 `( s( Q$ d% K, ?/ s# S- ?
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>
- C8 D0 P3 t; s# ]7 j6 C
<head>! N" C" V7 c5 X
<meta charset="UTF-8">: j: v" ]$ B. i4 ~
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
! @! R/ W' z% c/ j( e5 Y7 L, c
<title>WebSocket</title>
3 S+ L4 b. O- V+ Q
</head>
/ c1 ?! |& D: h' l) ?# K* f. }
<body> ?! l% @5 \! y! [9 T
</body>
/ _0 G8 D) C6 i1 }
<script>% Q: z( m1 u4 d0 y/ v* ]
var socket;9 ^8 `3 B) e7 B' R. S+ R# ?" V
if (window.WebSocket) {
7 N7 L B' |( z/ s
socket = new WebSocket("ws://localhost:8080/myapp");
" A: D% Y( V0 D1 O
socket.onmessage = function(event) {
& {9 I; u' Y" L
alert("Received data from websocket: " + event.data);& a. D* F; F/ `
}
9 l3 T0 ~6 T2 P: n
socket.onopen = function(event) {
3 G) u, {2 B' a$ g! h
alert("Web Socket opened!");
5 _" X3 ]& B0 d4 T) O3 M0 B
};% E' x6 d, b$ U! ]& k
socket.onclose = function(event) {7 a( G1 V7 y% S! F2 ]6 ~* w
alert("Web Socket closed.");
9 c& ?8 ^# W8 y x* A& a
};
/ Y8 }1 ^8 @7 b8 ~3 f- T$ N
} else {8 B0 B4 \2 C1 G, H, p2 v. F
alert("Your browser does not support Websockets. (Use Chrome)");
( l" m5 t0 J; n G3 t) z1 l/ h, f
}( ?# N0 t; H- H
! L! |+ l& v5 v* h P+ K* W
function send(message) {; G4 K* @1 z. i! ^* C
if (!window.WebSocket) {
k6 Y1 E$ B& X5 x s, |3 H* K
return;( \% H+ n. c. v( H8 i
}
7 w& @/ @7 g. H2 i m4 B+ Z. q
if (socket.readyState == WebSocket.OPEN) {
" }% y7 @. R, R: \
socket.send(message);
B; x ~, Y2 s- ~( W
} else { y7 T1 j# O% T7 { P! N
alert("The socket is not open.");6 G% `& }$ ]2 U3 N
}
" t; |2 i' \; E3 k0 K/ ^
}7 Q4 F4 h! z6 P
</script>7 e- O8 \# K6 R! z# |, E& f7 M
</html>

复制代码

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

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

浏览过的版块