浏览器使用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:// 前缀。 + S) b" I1 n8 w" y: \/ H

) u' F, q3 t6 B0 n1 n! m4 _
* {0 _* Y0 N- L/ g, B; X/ s该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){ //打开( U. }% x1 f6 m' G5 U1 k! U
}' V! s3 I. {4 J4 Q; Q0 S4 W
: D( A: _6 i! W- Y c' ^, i( m
socket.onmessage = function(){' L& m& q" p5 P' A
//在event.data消息数据; y7 L0 r6 n. K+ U
}
. a1 s. u' B- M8 V0 C
- X9 X& @; \$ [% c2 w- h
socket.onclose = function(){
8 c3 e @. G/ Q+ n
//关闭WebSocket' x" ?4 U% h( @. n7 B; W4 c* W# d
}
$ f+ j# J n4 O# ~: V% W7 V
/ s) t- @0 a% g+ a5 O- v) I
socket.onerror = function(){ J( ~7 k- [; f4 s
//错误触发& c3 @* C0 T! c! f+ q- l% Q' X
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html><html>) e. `" Y% X( B
<head>7 H, t5 y( p; |/ `( s2 g' R
<meta charset="UTF-8">% v# n, ?" ?: K, t% X3 Z
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">( @( i! C$ l( ?
<title>WebSocket</title>
" e! r O" x& w8 V, R2 s
</head>0 C! S- x0 f4 z; J7 s; Y
<body>
: S5 v7 O: W+ Z8 P* N, O7 {
</body>+ M0 Q4 O; l* G S7 E) [
<script>
% K. [- z7 u! s3 E& c4 ^/ s
var socket;
7 o7 b/ I, Z& y3 Z
if (window.WebSocket) {5 f8 n; L: I1 v* k7 [6 h% R! A
socket = new WebSocket("ws://localhost:8080/myapp");' [0 R% c; Z; A" V! ^4 f9 j
socket.onmessage = function(event) {; k1 u1 C( Q( Y! f% m1 I: z
alert("Received data from websocket: " + event.data);
' ^6 i; D" t% _ j. c
}, Z3 r& V4 z# w+ f& s
socket.onopen = function(event) {
; E# T6 X& F' D' d0 r2 \! s
alert("Web Socket opened!");
- T1 H3 n4 }. K0 B' d0 [
};
- G$ t: p- J9 @ |4 L1 X* Y
socket.onclose = function(event) {/ s9 u, k0 S/ ]( c K& N8 _) f8 P2 q4 U
alert("Web Socket closed.");% {( o( c& \( q6 s
};1 T5 E* K$ j0 e$ r
} else {
: i& h4 U3 ~! z9 S3 K: j
alert("Your browser does not support Websockets. (Use Chrome)");+ i: ]1 h* l) N. `! b
}
: D) e, Z7 f( S/ q3 y+ y
' q B( A/ N, z; w {
function send(message) {+ L; d" u3 s! W9 Q1 ~
if (!window.WebSocket) {, G4 D" t c& z6 z7 T2 q. [
return;
% w) B% n g) Z* T4 i. s
} h6 O2 ^0 l8 s$ r% ?7 E
if (socket.readyState == WebSocket.OPEN) {
& F" g7 P3 z5 H! v8 }, m- \+ @' {- i
socket.send(message);
+ F5 ^& ~% N$ Q9 w1 W
} else {7 r( ~" l P2 ]8 `: h# d! R
alert("The socket is not open.");
9 _% m& q3 Q; G/ ]( Q6 z9 \
}6 j. Z3 P# _9 Y
}
- F# ]# s- ^# Q
</script>
6 `7 a9 g1 l) l1 l
</html>

复制代码

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

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

浏览过的版块