在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>
) @% g7 c; J/ e+ M; l+ T
<html xmlns="http://www.w3.org/1999/xhtml">
: g# R6 L/ M0 o
<head>$ B T1 i1 H6 h% X! d/ z/ j+ z& Q
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
& A! `6 A+ B: u/ i" H
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>& w1 ~4 B7 p! G P3 C
<title></title>
+ `+ Q% D) T% X9 G- f& W
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>4 V* S/ Z v- M. ^
<script>
' V( h. V) v* G
var ws;
" L* X X" o2 a, C" x; \
$().ready(function () {- a; X6 h8 E6 P. Y1 X- u0 Q3 k6 Y8 r
$('#conn').click(function () {- ^/ F9 p4 G* s$ q) V9 z X) @
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());) y5 N* J/ s/ f$ f; y4 v/ J
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
! C- Z$ u: q; b; }1 V
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();4 b" Z) q2 y, k2 V9 P
//var host = "ws://192.168.85.128:8085/api/WSChat";( O0 ]2 u/ J2 G' z
//webSocket = new WebSocket(host);
, W0 v& d- x7 F
5 ]" d5 R; r- D; Z% n% e
$('#msg').append('<p>正在连接</p>');5 T+ W$ r$ I R
Z5 a s+ x* E
ws.onopen = function () {
2 _7 X2 y+ y/ v6 m
$('#msg').append('<p>已经连接</p>');7 c1 Y' P. G: |! K: _# ?
}
: }$ g6 e8 r) X- D& y
ws.onmessage = function (evt) {
. Y4 ^0 {7 S% A& @& h$ z7 ]! V3 O* s
$('#msg').append('<p>' + evt.data + '</p>');
) m2 a) R0 l! A; b* Z
}
2 ]7 U2 T3 |; n9 |
ws.onerror = function (evt) {$ P2 ^$ y+ A$ C: w% C5 i
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
- I" @+ q* A& j0 D$ l
}* {; w9 p8 j% L1 v- c E
ws.onclose = function () {/ A, |' i# W$ T7 e [9 l& K
$('#msg').append('<p>已经关闭</p>');
! K3 |+ g c# C. f, s# k. C
}% m, n3 S" H- |7 b) J8 x* f6 M9 C
});
2 V) [3 [0 k! ~8 F
: a. Y% x& Z1 d) L6 i
$('#close').click(function () {' W+ K5 M i2 U1 s$ v$ }' H9 ^" F/ a( d
ws.close();
q# W" Z: n+ H O7 S; E
}); S6 H' _8 A! b. t B# K/ s; h
7 y) E7 S6 n- C
$('#send').click(function () { N. ~/ u' o; }- w/ Y% J" X, G
if (ws.readyState == WebSocket.OPEN) {
7 R8 F/ } b9 G. b4 X3 O
ws.send($("#to").val() + "|" + $('#content').val());, ^0 A, i' G3 |
}
B" `1 m5 r7 _9 W" S# I2 D3 F
else {, y/ i, ~8 T" r) z, T
$('#tips').text('连接已经关闭');
" i- H/ v7 m' \' \1 X0 ^) Z: F
}0 }5 ~" X X+ W9 j4 z
});
2 Q% H. K; ]) L- m' V6 h( G/ a
6 m- V0 o K) c) f0 G5 ]$ S. n
});
' ?' }! B- C. @3 E- F6 g7 v- e( b
</script>) e; h/ d& K* `3 v3 l
</head>
0 J* G# \7 E+ r
<body>
V% ` n1 `( J1 A; Q0 Y1 i
<div>
6 _6 D' y% `( b; P9 j* q
<input id="user" type="text" />
% ~7 O- n- k- S* ^# \* E
<input id="conn" type="button" value="连接" />; H: i/ C. u L2 B& C
<input id="close" type="button" value="关闭"/><br />
: S1 g% P9 X+ P% h8 I
<span id="tips"></span>6 F3 L- _3 } m
<input id="content" type="text" />
( u+ x; v6 L# m1 r3 Z" m+ `# Q
<input id="send" type="button" value="发送"/><br />
5 \5 V) @2 |$ R; Y8 s2 }3 h
<input id="to" type="text" />目的用户
% O0 `3 s; O/ f2 P2 V! e4 K
<div id="msg">, o# |2 n3 F5 X9 k% R b; d. k
</div>
. \8 m8 \; ^1 X$ {: T# N
</div>4 `) N1 E* }4 n. k
</body>
2 J1 N, D$ D5 h: Z
</html>

复制代码

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

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

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

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

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

浏览过的版块