在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>
# f& i8 h2 L/ k8 n) r$ `
<html xmlns="http://www.w3.org/1999/xhtml">
8 V* r$ o1 G) N6 ]/ q6 j0 H
<head>
* t& c/ i% ~9 n/ n# Z
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
$ e/ r* N0 c* v
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
* Q- y2 C2 {5 \7 w. I+ y( x
<title></title>- J, ]" J" i8 z5 ]( q
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>$ X2 f2 `* I1 e2 ]- A
<script>
7 o# g, s) ~% l: D
var ws;% F7 I: d) R+ {& U& _
$().ready(function () {' l- H6 N6 H& S7 }- ~
$('#conn').click(function () {
! \ z( `# R% o
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());' a- ^: G5 Q, P8 y6 q) d/ F
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
# e6 p' w/ W# J
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();: u; u' c+ h& d
//var host = "ws://192.168.85.128:8085/api/WSChat";
- l" O+ D' y1 z f1 e6 Y+ ]
//webSocket = new WebSocket(host);
" I- {# D! B# i- [$ j- {) l
9 G B! _+ a" t4 R0 e; G# R
$('#msg').append('<p>正在连接</p>'); U0 o4 ]+ b& z& t" L8 J! L
* n4 ]% @7 u# Z1 ^
ws.onopen = function () {
- X1 l$ ^6 P, q% c; p! G5 @ Y
$('#msg').append('<p>已经连接</p>');
$ V- X; C" n8 k9 K4 A
}- F& @# J7 f$ z3 H. C8 h, @
ws.onmessage = function (evt) {$ @. {6 ~$ |; I
$('#msg').append('<p>' + evt.data + '</p>');$ L/ ^8 ?6 W7 s2 U- M. z( e( I
}
6 t* e; b x0 c; ], w1 O" Z
ws.onerror = function (evt) {* O6 V. j; \4 z) H# g
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
! x3 x$ \3 I! \. i B. W& \
}# U# c: D ~! H9 j8 C; Q4 y7 t
ws.onclose = function () {# a' n! L! j- z4 G' S6 R; x4 j# S4 t
$('#msg').append('<p>已经关闭</p>');
1 L7 h4 ]7 N* F: v& Y; m4 r, u
}* b! e# C E5 n7 e- h" L
});
* R3 r1 k: T& C+ J6 R3 T: I! p. v
: \! A8 J; l* {) I" [
$('#close').click(function () {; U/ K/ s1 ?% b3 d3 \6 t
ws.close();
- s& S/ @9 y* D- k
});4 O3 V- M' }' [1 V! J e+ R' e. |
& p' w3 A7 Q: w C+ r- U
$('#send').click(function () {
( _ y# F/ F e% F% Y
if (ws.readyState == WebSocket.OPEN) {! G' G8 w+ g/ V1 j( M. d; ~( M6 a6 x2 o
ws.send($("#to").val() + "|" + $('#content').val());
9 R% _& Z5 G% U3 b
}
# u6 r5 ^; K! P _& @/ _
else {
4 V' E: s. `7 Z( T$ x
$('#tips').text('连接已经关闭');0 `# ] }! w8 [' _- E
}8 R3 g, l$ Y6 D5 h- T. S
});- C& H! S* ]2 P/ v3 R
9 w& j6 A0 p% s% l) z' E- t( K, T
});
0 M3 p: y- |; @6 p4 \$ `
</script>
6 v1 f1 q5 }0 y1 R) F
</head>" h% X- `) h- C4 Y4 G
<body>5 V; a% ^( S5 ~
<div>; J _5 [0 B1 f1 \
<input id="user" type="text" />
6 {( T( O. M) e6 F- ^
<input id="conn" type="button" value="连接" />% Y g, U8 S$ u( o! W3 M8 e. \
<input id="close" type="button" value="关闭"/><br />
) g, [3 x0 L$ R; }
<span id="tips"></span>
3 ^$ E/ }$ {0 o- E8 h! V: w
<input id="content" type="text" />
* I3 B: z H3 P B* n* ]
<input id="send" type="button" value="发送"/><br /># w' f0 u" q6 E2 d* F+ e" z$ F
<input id="to" type="text" />目的用户9 y3 H( [5 Q# g8 F
<div id="msg">5 H: T, D" o2 c
</div>0 |$ I' c& }; z W: V
</div>) Y: F0 a1 L6 {( }4 G8 s% x# }& ^
</body>( |: Y, _8 a8 H; l9 f1 v. R! _5 V5 Y" p
</html>

复制代码

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

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

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

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

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

浏览过的版块