浏览器使用WebSocket实时通讯

admin · 发表于 2018-6-29 14:55:21

如果你要有一个支持 WebSocket的服务器（Java、Php等），可以在浏览器中使用一个新的WebSocket服务协议，来打开一个链接：

var socket = new WebSocket("ws://172.0.0.1:8080/SpringWebSocketPush/websck");

复制代码

2 G5 I. J' U# h- B- F与http://这一URL 前缀等价的WebSocket 前缀是 ws:// ,安全 WebSocket 则有一个与http://等价的 wss:// 前缀。
- `" s; U( `. b0 C V/ U+ j _+ K1 i1 L+ t x% N/ h4 \
* Z2 k/ K8 G, c7 C4 W# a/ Q
该套接口对象有四个用来监听套接口事件的回调：

socket.onopen = function(){
- f! p# @; T h: v" W1 L, x
& W7 o- @/ p- I) _2 g8 k
//打开
! ~4 Q% D4 h9 N' ^2 V5 [& H% y' p+ p
, D# T% R+ t$ y f
}
& R+ e% B* ]$ _8 O2 Q( U F# }
% e3 f j5 r5 o n% i. |' y- b I
. S, ^$ N6 q5 p4 W9 F
socket.onmessage = function(){
4 `& H Z, c! c/ y6 X: W2 m
) e% x$ A7 i0 H- R; I0 @/ m
//在event.data消息数据3 z/ K9 C, I- E6 p
2 x# _0 w, l+ m
}
y! n. B1 r" |! c# K& G6 X
/ f9 g( e! ~1 C/ k
socket.onclose = function(){
N, N( R& H; ]$ T
0 B M2 ]7 m% |
//关闭WebSocket
' s2 \4 \/ {! Q6 r1 U. ^
+ H. d4 u" `2 M; W4 d, ^0 ^
}
9 k# D& Q2 d" K4 F) s" u- s
9 R" l# C3 O& B y# I
socket.onerror = function(){5 @) p, h6 N1 \# B& U$ L0 R
$ h5 K+ n8 D' z. F7 H x
//错误触发
* C. r! T5 O/ U
& x% u4 y* J* Y
}

复制代码

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

socket.send(message)

复制代码

代码附上：

<!DOCTYPE html>8 p! x4 T$ Q' ]* V0 k! p
<html>
& l! Q( s( N+ P; l4 i
! Z3 k0 r; d/ A: {! y
<head>" q& w/ ^; }" q" E
<meta charset="UTF-8">
$ ?- s* @( Q1 b9 L, ~
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
- ?+ X* E- n% h+ _
<title>WebSocket</title>1 A' c2 |5 a& c9 u# @9 h
</head>
2 y% X/ p+ w5 r! x1 Y+ a# G$ y% X* a
- [ Z' a. F7 I# r
<body>4 U2 f w6 d) {2 N, e9 P8 h# t
</body>/ E% v6 V& H" n& `
<script>& W+ a. W0 O* r: ?/ F5 b+ c
var socket;
0 A4 t. i) l" u
if (window.WebSocket) {( K7 a9 {* ?" Q1 M' t" {
socket = new WebSocket("ws://localhost:8080/myapp");
. ? |" F# E! d7 e/ F) O
socket.onmessage = function(event) {
* z! A4 P# p" M0 [8 j( E- }6 l1 s
alert("Received data from websocket: " + event.data);
" s, J" u F l' e* n" W
}! D/ O. @6 ]7 ^' u E
socket.onopen = function(event) {2 |8 s# ~! ~4 ?' M, M6 z
alert("Web Socket opened!");
# W" Z6 Y! {. e2 J0 B4 H
};
1 @* ?; ^2 J+ l
socket.onclose = function(event) {
* m" j9 Z# U' k+ O
alert("Web Socket closed.");
- P+ b$ d2 H0 ?9 q, w" Z/ e1 ]$ A+ l
};8 |" j0 n: H1 U5 U9 a3 i
} else {
2 \+ P, q. f" p0 {5 e
alert("Your browser does not support Websockets. (Use Chrome)"); j% T/ R \, k
}0 v: g0 ?5 T% n0 _5 x& M
9 ?- s+ H% w9 M, ?
function send(message) {
4 t1 X, k2 |& V6 b8 j, c/ e
if (!window.WebSocket) {5 R9 M% M1 J# ]4 L( e
return;' ?5 N- r8 R/ S& q
}
* i( F( a2 G# p6 @ S0 z# W
if (socket.readyState == WebSocket.OPEN) {
- t; O) K0 B0 I7 C1 c
socket.send(message);. Q& O/ O; K( X) y
} else {
1 T, q' E/ ]% D. X! l8 q* q' l
alert("The socket is not open.");3 [. J$ {) {$ q% j/ C
}
/ w0 W- Y7 w' w9 ]+ y' k9 L
}' |) `1 V2 o5 O" p c7 k
</script>8 p, s5 s; p1 K$ R0 u4 @
7 U6 }( F7 v K2 m" p# u% Z
</html>

复制代码

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

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

浏览过的版块