在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>
) w* z) F0 t- b# O6 X
<html xmlns="http://www.w3.org/1999/xhtml">0 U- P' d$ l* Y
<head>
' y! L+ N% C; s3 l3 J% l
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$ _/ p E' M$ s3 A* }- h' j
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
: e: S6 M* L* m6 d% K
<title></title>5 @# h. Q) G# ], B' e: {! B" Y& Q3 z, {
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>4 W- F* {0 J0 m5 Y9 m! K" D
<script># Y0 h4 _" i; U* X$ K
var ws;
+ X1 r$ A8 Y* \
$().ready(function () {
+ u* g) f& Z, o8 T% m! g3 ]1 V
$('#conn').click(function () {
6 W/ F7 m1 f9 g
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());) w( Z* Q4 y" B
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
: z8 i5 H6 Q9 d$ p# q& W- ?% E k/ M
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();+ y4 O6 O1 P. X/ w0 m% N& l! f$ d/ ] o
//var host = "ws://192.168.85.128:8085/api/WSChat";
, g: A7 P# H& K) R( u$ M. V# B" S
//webSocket = new WebSocket(host);6 u% x/ G9 S" D
% \5 ^/ l# M/ d6 ?
$('#msg').append('<p>正在连接</p>');7 q' n# r; {2 K2 t
/ P/ G" C/ o) ]# W
ws.onopen = function () {2 l/ \. d4 K' F c# P
$('#msg').append('<p>已经连接</p>');2 `0 _1 ?) i8 t: E- k1 g) e6 p
}' V' T+ N1 {" m/ X _
ws.onmessage = function (evt) {, N3 I' O1 V; l& u, r3 N* k
$('#msg').append('<p>' + evt.data + '</p>');* L- V. u, d) U* {+ R- J
}0 d9 \4 {# z( _$ u. A
ws.onerror = function (evt) {3 g9 a5 n/ j6 z) P. X$ J4 _
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
1 |3 ?, @: i* S1 I2 b$ k
}: X) j4 h9 o% F* \( x* T1 o
ws.onclose = function () {# r9 r0 o2 i* {; {5 I
$('#msg').append('<p>已经关闭</p>');5 E; W# m' V1 C# a6 f; D. _
}
" d" D3 L7 z# [* j
});' X& o4 l& l8 c \
6 x1 s; @8 A& f
$('#close').click(function () {
, m4 O- b5 P% Y8 n: N9 x
ws.close();
9 {$ \" ^; T/ M$ ?$ a; E7 b( [
});+ H6 J4 A: q; [" M' R
. k" S1 o# }1 j
$('#send').click(function () {
; }" A$ T" j3 y2 }
if (ws.readyState == WebSocket.OPEN) {. }8 g5 H* x) K6 S
ws.send($("#to").val() + "|" + $('#content').val());9 Q( \% r, n4 D+ ?
}
( J* [5 e/ z& `) o. s
else {
, C" N/ ]! t+ h# V/ H
$('#tips').text('连接已经关闭');- F' S. `; g( R
}
4 ?5 \0 x" u( Y( j' f7 y5 W
});
' W) Q$ @% W! ?9 K' c) U1 i( ^$ N
; q- B; O4 o& u5 @# L; O
});
& _: ~; _# e' `6 C. o3 s
</script>
7 p+ Z! E# @/ X6 V; c: a
</head>' l# ]/ I) E, `. b5 d
<body>! b* _2 I# C. P6 y$ f& R
<div>
0 ?1 I# u* T, N9 J6 C1 @, z, M
<input id="user" type="text" />
1 k2 G w, ~6 q2 B) ~
<input id="conn" type="button" value="连接" />
1 S( A8 d. D" Q6 U. x. |- a0 b
<input id="close" type="button" value="关闭"/><br />) t' h0 S. D' l( z
<span id="tips"></span>3 [! O( E$ Q5 M! L7 y2 a, P+ c- R
<input id="content" type="text" />
6 |" b' r) T- e4 F9 p. C
<input id="send" type="button" value="发送"/><br />
; p, y7 G; D, q' u8 }" I9 m7 E
<input id="to" type="text" />目的用户) u5 r" P2 |$ v/ s8 X8 }
<div id="msg">2 t4 e- T& y7 Y2 u" K0 M
</div>
. \/ D# T$ v! e4 C6 J6 M1 l7 }4 O$ o
</div>
9 P N' @6 Y: `/ }* c4 C( Y
</body>; M% T0 R# m7 b) Y f( g( e2 n' t, U
</html>

复制代码

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

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

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

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

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