在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>
! h8 H9 A, q' d& ]( n) Z
<html xmlns="http://www.w3.org/1999/xhtml">
) b0 M" |/ u" k% |! W* L' Y/ X
<head>5 d. u4 l' R G. h+ U# e
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>% d+ U5 ~3 n- u' m7 z: m
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>/ X; | D! m1 ?% S
<title></title>
3 ?' t" F4 K2 }- {9 T( f2 `) @
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>5 U; U& I! K9 I( i! I- n0 j
<script>
" r7 b8 {- c8 _* d
var ws;
7 T; o; D6 |( k+ H
$().ready(function () {. h7 {: u! I% ^ l. _
$('#conn').click(function () {3 t2 e+ g7 M$ ] _
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
, y! Z& [7 C. |3 H1 d7 A& j
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());- M/ w& \# j/ ?, V, H* l5 J% d8 C/ D
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val(); f$ }$ {7 M4 ^& X' s
//var host = "ws://192.168.85.128:8085/api/WSChat";
, X! u) \* t" I, F( B! Z( W/ M, e
//webSocket = new WebSocket(host);
* d% q/ @) g$ b% Z
* _9 y! B5 Y; w" ]6 H" \# w
$('#msg').append('<p>正在连接</p>');
. ?0 ]* ~8 t2 G# ~1 d1 ?
4 g: a+ m4 L" Z4 [* s- I! a
ws.onopen = function () {
6 A' G, w0 i/ [* S# l% C' ~9 T
$('#msg').append('<p>已经连接</p>');' d4 s( P. @; U+ V' Z7 C
}
6 u4 Z3 ~& w& Z$ P" w
ws.onmessage = function (evt) {
: b, r6 y! w+ q! E: p7 r
$('#msg').append('<p>' + evt.data + '</p>');! _) Z9 j! z1 R* x- n# I$ A' t9 c
}' V' }1 U/ f0 ?6 J. Y3 e" }$ X
ws.onerror = function (evt) {
* ]4 A* _" Z8 b* P3 _8 z
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
}& E+ I' r& q' k* Q8 K2 U' j
ws.onclose = function () {
' h. V: o* s+ Y& g( ^0 v! _# n" R
$('#msg').append('<p>已经关闭</p>');
% G' O! L% ~7 O2 T5 ]2 v
}+ Q6 V) r& Z A a9 W- v0 ]
});3 ~# k* {2 p2 O M: P7 a
5 t. F% D& `9 w7 f& F
$('#close').click(function () {
! _% |* b& n `3 o2 R
ws.close();
) }! S$ H2 i2 P; z, U7 ]1 \
});
, i2 R# c# p4 Q2 C2 i! c1 a6 |' a
' d- n0 B9 T3 J! d1 \2 k
$('#send').click(function () {% T+ W8 z2 R- v- @" ^6 U
if (ws.readyState == WebSocket.OPEN) { L" n7 R& o" v& P
ws.send($("#to").val() + "|" + $('#content').val());3 f0 G" t4 ^' P5 ?
}
, w( y' k' ]) ^) P
else {' h; @- x# p+ ?3 l# p8 ]: n
$('#tips').text('连接已经关闭');
: |/ W$ i9 ]% n
}% r+ N4 l, e+ K' h
});
( j+ v$ }) _ c5 q8 i6 S. q
$ L( V: z2 }+ u3 B0 [
});% V1 i* h1 ]7 m/ [% u5 M3 _/ d0 f, N/ v
</script>
* O% ]* J5 y: f0 o' p5 `7 r' k
</head>2 Z# _, Z. P* I; ]
<body>
1 j$ f5 R% H/ F5 q0 G) Y+ @* g0 c
<div>8 H5 u" @; Z% \$ ^8 X# K
<input id="user" type="text" />
: ^0 C/ t- p2 a( G/ C0 o9 q- y
<input id="conn" type="button" value="连接" />
3 x& I2 {2 e" a5 {# f
<input id="close" type="button" value="关闭"/><br />
' }* M5 ]. F2 Q; N$ n5 g2 [
<span id="tips"></span>6 b% ^2 y8 K$ c1 l* b, B5 R3 E
<input id="content" type="text" />
9 v' K& }! ?8 T' ?
<input id="send" type="button" value="发送"/><br />, u R! T, A7 {% T7 B P
<input id="to" type="text" />目的用户' J, I! `6 w8 g' p
<div id="msg">1 F) ^- ]0 h( q l1 z
</div>1 T8 ]0 `* s) d- Z- x: [( _
</div>
/ q4 ~7 a: G% S3 B5 K
</body>
. T; ]: D5 R* Z
</html>

复制代码

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

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

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

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

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

浏览过的版块