在IIS上搭建WebSocket服务器（三）

admin · 发表于 2018-11-7 00:42:00

编写客户端代码

1.新建一个*.html文件。

ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
这个地方的IP和端口号对应着我们搭建在IIS上的WebSocket服务器

<!DOCTYPE html>& v0 U4 F/ G% F8 |" ?
<html xmlns="http://www.w3.org/1999/xhtml">. m6 w, b3 @+ X/ e/ s' S( R( |' A
<head>
Q+ R0 V U" D5 Z0 M5 y8 s+ Q5 v
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>% U3 _7 \4 i; h( G. C& x% H* F) M
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>% F7 d- B5 g* n& U v
<title></title>9 W5 a; m( T; C& L7 g
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>2 r6 ~6 S7 ~4 O, O, q, X" O
<script>3 s4 w/ h( f$ |" H% c& H* \
var ws;" G/ {: }* R& G" Z; \
$().ready(function () {
4 O, h" N- C1 j% W# g5 j
$('#conn').click(function () {' Z+ m+ v3 a( W7 }+ D: i
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
' K" f$ h+ f2 f: o: L- g) m! m
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());5 R" X0 F$ o# Z! [7 n" w" s
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
9 G: s, O1 M. {2 O6 z; |
//var host = "ws://192.168.85.128:8085/api/WSChat";% j) B! B: o& c; |% ~* h
//webSocket = new WebSocket(host);
% K+ [+ x/ Y9 ~
' J# p& R6 s, k- d- O- d1 ?0 V
$('#msg').append('<p>正在连接</p>');
' a1 r8 i# d! ~% Z( ^$ ?
" \% ?4 U8 c# z6 g$ A; c
ws.onopen = function () {5 i7 { F& ]/ ~
$('#msg').append('<p>已经连接</p>');8 M4 }) n" q4 c0 x
}$ X4 u' N# M: b' ^8 _
ws.onmessage = function (evt) {
7 \( [4 t3 V- l: a$ r3 K
$('#msg').append('<p>' + evt.data + '</p>');; k# ]3 E1 D5 K% O) K* a9 \
}
, g' n; j) B4 z+ H' [
ws.onerror = function (evt) {
5 `& T" Z5 E% f) T
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
3 Q/ j: o' [6 ]- c
}8 m3 C" m' n6 _0 _3 p+ r) c2 R$ u
ws.onclose = function () {* V6 d; a2 J. Z/ K* T# D
$('#msg').append('<p>已经关闭</p>');
# |4 o" T! x! |& c
}
/ h+ L; j' o- B' e5 x7 j
});
: _7 H, {& O5 F4 {' U) Q4 r# @
9 D3 { a. [7 ]8 b8 W# b
$('#close').click(function () {8 E; w2 L) z+ B& F- _0 y
ws.close();
) ^3 M* J7 ?# m, ]3 W+ o+ s
});
; s* ?1 |, `( o- n# S
2 O- H$ _+ x# S
$('#send').click(function () {
. p' E4 S) L" y% t
if (ws.readyState == WebSocket.OPEN) {1 \ t/ t/ ^9 x) u" Z
ws.send($("#to").val() + "|" + $('#content').val());
0 a! Y! d: f3 s c* R) R
}' P$ G1 l7 j; P3 x3 n9 v3 b/ K% r* A5 w
else {
& z% l; b" P9 O* r+ \+ }+ q- q6 r
$('#tips').text('连接已经关闭');3 O) f+ J+ Y# P% E6 A8 l+ G
}- z6 C4 Z4 ^* l7 f: V; N
});' A- v. l9 r& @7 L- p
' M) h$ W6 t9 X3 `8 n
});
( [; W8 r0 |7 e
</script>! m0 n) ]4 }/ _& h/ ]
</head>
7 E9 O5 N8 S+ s4 J* ], C
<body>" j0 H$ p* A3 B! q$ Z' S* {
<div>
8 E$ W4 C1 r7 o
<input id="user" type="text" />
8 t) `! Z7 e0 h$ z5 R2 O
<input id="conn" type="button" value="连接" />
& d6 h: Z( b; p2 G9 P4 V0 w
<input id="close" type="button" value="关闭"/><br />
& @* d' d* Z4 ?7 H# W
<span id="tips"></span>/ w& Z1 p; N4 }
<input id="content" type="text" /> I9 e, W4 Y' y9 S' _
<input id="send" type="button" value="发送"/><br />
0 g5 u' N1 l5 ?& ^( N2 ?1 k7 D& M
<input id="to" type="text" />目的用户
0 [+ ]5 }( u: @+ Q
<div id="msg">
! k0 [" O M" m+ Y9 B
</div>% k2 t; Q8 b- W3 h; O/ G
</div>( V( s9 e. p2 e% H" L0 W8 d: m
</body>
; J4 ~. g) E' B& L0 L1 r
</html>

复制代码

2.客户端A和客户端B通信效果

在浏览器中分别打开两个窗口，左边为客户端A，右边为客户端B，点击“连接”按钮，AB客户端分别与服务器建立连接

填写要发送的内容，即可看到A和B互相发送的信息了，即实现了AB客户端实现了WebSocket即时通信。

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

[html5] 在IIS上搭建WebSocket服务器（三）

浏览过的版块