在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>
& Q! ~+ o4 u% w
<html xmlns="http://www.w3.org/1999/xhtml">/ _; _8 r4 O4 a8 J
<head>
+ M8 D( C2 E7 h# m, ~
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
0 U' ~9 e7 C" h5 R7 B8 ?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
' ?$ ~- Z4 \- V5 }! E( q) W9 e
<title></title>- \% r4 z9 `) `8 u' ^' `" t4 s
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>. ~7 e: E9 ^. s% C7 G& y1 p2 y
<script>
: @: P m! \/ h3 R& t+ z9 U% h
var ws;
6 }) f# G% f1 m# T# {
$().ready(function () {
# Z" W" f2 Z, G ?5 Y, C
$('#conn').click(function () {
% M T9 M8 ?5 S1 S: d
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());7 [5 e4 a8 l T( n( N
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());4 k1 G' [/ @6 n" W& c' \
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
0 @( o; D0 U- K; L: Z& r
//var host = "ws://192.168.85.128:8085/api/WSChat";# \+ {! v2 J% K4 P; G; `
//webSocket = new WebSocket(host);$ L4 M$ z8 @. l h$ O0 Y+ ^# @
5 T/ i% Z& s* u& B9 g5 c8 ]
$('#msg').append('<p>正在连接</p>');9 `& n d) |+ ~5 r, o! y
, S, {6 F/ h$ `% j0 J5 X" u m& v5 P" e
ws.onopen = function () {
4 R; p3 j8 B; P% v
$('#msg').append('<p>已经连接</p>');
9 C+ ~) J9 x8 d$ [8 U
}
' i7 H3 c! l6 O" z A; s( W8 o
ws.onmessage = function (evt) {4 W& I# O0 K2 d$ y: c8 B! r7 _. ~
$('#msg').append('<p>' + evt.data + '</p>');
* b0 i/ Z# g0 a; p% x0 C
}
& ~# J, V' o, y: {
ws.onerror = function (evt) {
% b5 W- u7 c8 M; j
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
" T! v" v2 ~+ |! A: D; N& }, W* ?
}
, F# Y3 K2 E$ H3 x/ L
ws.onclose = function () {
1 E4 ~2 V& O6 L' @5 Y7 H: D
$('#msg').append('<p>已经关闭</p>');9 X/ x- F C) D' s! f8 C& Q
}9 d r4 j. `/ w1 B
});. V. H( M$ R! ` T
/ o& l% S. T: Y1 L0 I1 @- ^
$('#close').click(function () {$ \% f, ?6 q4 V; }( ?. O7 O$ p
ws.close();
9 W$ j/ j- T8 |2 G- x
});1 |7 A2 r, Q4 }% @0 Q
: \1 b8 Z3 O( @) \) w
$('#send').click(function () {
2 t: @* e, ?# q6 q. L9 N+ f5 _1 _
if (ws.readyState == WebSocket.OPEN) {
" M1 v5 a: p7 V# P* [
ws.send($("#to").val() + "|" + $('#content').val());, u- w- C8 W! p4 ~9 ~
}
2 G$ C! k, o" E% ?' r% y
else { S5 r! B( d0 H
$('#tips').text('连接已经关闭');. Z [, Z5 z! @7 X, e7 z( t# |, j
}
0 R7 X% q! H. |: X: g! f
});
5 _$ Y9 m. j3 p1 L: e
T6 c2 ]- U2 `) W
}); g. H* r8 [) C% z1 ]! D, M% w: u# @
</script>0 d6 j) ], q' Z0 C
</head># @# o4 |! g% q) h- c
<body>9 z) [ l# a- W3 @" L
<div>9 F4 t- s/ @# J
<input id="user" type="text" />& [8 l7 \2 _% n0 X3 z8 L+ E/ V
<input id="conn" type="button" value="连接" />$ y6 \+ l" b v" {% [9 ~3 B
<input id="close" type="button" value="关闭"/><br />
" [- F# R: d) z: F) Z! Y
<span id="tips"></span>
/ D; a4 L% m6 O$ \: B3 N+ }8 B$ r
<input id="content" type="text" />
; E" ]/ Z9 S- G$ o1 D+ Z
<input id="send" type="button" value="发送"/><br />
4 \8 ]2 `. @% G
<input id="to" type="text" />目的用户
$ ]4 F& F5 y. J. q) q
<div id="msg">3 u+ h7 q- T3 c3 B l
</div>$ F( t" s H" Q2 V. w8 e
</div>
4 l# e M8 X* m2 K
</body>1 v Z( k) k7 I2 q8 O. K) W3 Y' g0 d7 `
</html>

复制代码

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

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

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

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

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