在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>% A* s% M4 I4 G ]. g. v! y- @
<html xmlns="http://www.w3.org/1999/xhtml">
! E+ |( J8 ~: k6 W$ g, X" |# p
<head>" C* Q* s- S3 ]8 x* ?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>9 l( h$ d& P7 E, p. v
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
8 H* J4 {, a2 B# J2 s7 z) y
<title></title>9 O6 J0 x+ l _1 e$ H- a' Z
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
8 a# f! ^- A4 }& c# N& H: W
<script>+ Y' g1 p* r; |9 L
var ws;
: J1 ^0 f2 Z$ j% f$ W7 a6 e
$().ready(function () {: U0 d" M$ u" ?1 N7 i+ K
$('#conn').click(function () {
9 q2 F9 f7 d0 w1 E* M* O6 z
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());! E" H+ v5 P5 u, F3 {2 J7 Y1 M% c
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
% ]( g2 a, x8 G$ j
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();& p8 p( j# B+ }. Z( ]# c
//var host = "ws://192.168.85.128:8085/api/WSChat";
% @* n- l1 w0 [$ \ d: o
//webSocket = new WebSocket(host);2 h0 {/ m; \: J; d
0 U% q+ g8 F i( h; w
$('#msg').append('<p>正在连接</p>');
& s; t) u. s5 U, s3 ?
- U- `( F: Z& F: N F, e
ws.onopen = function () {! i% [. O# T7 e# b1 D+ Z- Q) k
$('#msg').append('<p>已经连接</p>');0 x+ E) k4 m) m9 {. ]3 M" u
}
5 U9 e. z4 Z8 ~/ V" A
ws.onmessage = function (evt) {0 o8 A- v0 e7 B# h8 d0 E8 l
$('#msg').append('<p>' + evt.data + '</p>');# E! l. o- l4 p. `$ \7 [
}
0 g- b# B1 {" `
ws.onerror = function (evt) {9 S( Y* @# A2 |; k2 v6 n
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
( v! X* o" L {5 D; }
}
* t! ^# J6 Q# K* H. I
ws.onclose = function () {
% @) u9 A) S0 ~% j7 V! N6 S; ^ f
$('#msg').append('<p>已经关闭</p>');
; [# }& @7 v1 ~9 T2 p
}
& I I2 w- a1 e) ~% i3 T4 ^) W3 [
});% C" F( T$ P9 s9 E6 u# ~ R8 o& [
3 r1 ^, P, X' H, H9 F0 }% u- O& X
$('#close').click(function () {
9 _. ?6 Q4 F% \* M, q% H: c
ws.close();
8 w1 S+ s/ C# h; W# o8 y
});
P6 H, ^. V; x) y
3 P6 l8 ^% d7 x) ?
$('#send').click(function () {
! e6 d/ @, |( {2 c5 z
if (ws.readyState == WebSocket.OPEN) {+ j& H; L! f; e4 }, c
ws.send($("#to").val() + "|" + $('#content').val());
$ u6 v% O. i' a. I+ t
}4 m+ F1 e+ a! u8 ~5 z: _
else {0 H8 O! s/ s+ s" J9 y' E
$('#tips').text('连接已经关闭');% H3 k' r* |- e
} t( c1 F0 t3 R2 W8 E9 e( A- a
});& B" g2 f9 J4 J5 J- n4 U; S @
) d+ ?6 _/ ]5 ]5 h* L! D | t
});! y2 r2 {& p1 B" T) f1 c
</script>
F7 C M& O3 | {) H
</head>
z" Y+ g: r0 E" o
<body>
( L4 W/ |% S4 y5 j% P& X
<div>8 z. c: k7 h# H' \, X
<input id="user" type="text" />
6 d [7 Q( p0 p7 z
<input id="conn" type="button" value="连接" />
& t D2 L0 l5 T. A; Z
<input id="close" type="button" value="关闭"/><br />+ W {$ I" N/ u- R
<span id="tips"></span>% Q* h) O; ]) }3 G5 z8 y+ k, K
<input id="content" type="text" />
2 U2 V* `6 Z6 T
<input id="send" type="button" value="发送"/><br />) y: L" n) ^, h3 x1 i
<input id="to" type="text" />目的用户. u7 d- Y6 }" {
<div id="msg">
6 |- y' w/ P& h; q3 n0 |% ~5 T
</div>
" d3 R1 r. b* l% Y6 i. C
</div># ^1 s% R# w/ K+ h% @4 \3 @0 i
</body>- g7 i4 i' ?# @% P6 v0 J" g% I
</html>

复制代码

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

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

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

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

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