在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>7 t2 M$ U" _8 `2 M: o
<html xmlns="http://www.w3.org/1999/xhtml"># X+ G5 k0 ?3 s. o
<head>) L6 U! A/ A3 D: N( E- d$ y6 ]
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>2 _/ P1 W A- H! X- W
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
& g0 c7 p+ H2 [& N7 c
<title></title>+ E# A" f6 `7 X9 g! V4 f6 c
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>/ t0 F$ I: h: N$ [/ E2 }' e3 q
<script>
& b9 v3 V5 v" L2 R
var ws;, [% L6 H+ G! \7 C7 [- c% {
$().ready(function () {
3 ^0 H/ A% d! u. n- h) r4 W
$('#conn').click(function () {
z( W9 h/ U/ M: T% s6 l% U& g7 `9 o
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());
j. `* y4 u$ X. h5 t
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());8 H& c7 z- t9 g2 i; w; \8 a# d' v
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val(); q( p: ]( p! F! _1 {3 l. u& n
//var host = "ws://192.168.85.128:8085/api/WSChat";# Z, C% d# }: M, d
//webSocket = new WebSocket(host);
1 M& c' @2 Q( [ Y# k5 \5 I$ n& F
1 u- o$ Q; r @8 {. q
$('#msg').append('<p>正在连接</p>');8 M* ~4 z2 ?5 x- B. w, {% b
1 \3 X( H- l; j! A% N
ws.onopen = function () {
5 n3 V0 p- a0 r, m7 U0 d g- J% G
$('#msg').append('<p>已经连接</p>');
1 I8 `# p) V( Z' W/ E' O; d
}
$ h/ u1 u: m; a6 I
ws.onmessage = function (evt) {& K! i" I5 Y6 D$ i9 R/ g. Y
$('#msg').append('<p>' + evt.data + '</p>');
3 z @: Q. ^9 Y
} s2 ^5 }: |9 ?- T
ws.onerror = function (evt) {# L8 U0 ~: R* Y& W* `- W) A
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');
1 S n3 z# g0 R' `
}
5 w8 g1 _2 b! {1 `: o
ws.onclose = function () {
! R: [/ ^$ ^# M9 C
$('#msg').append('<p>已经关闭</p>');4 }" l7 [: h+ q* D' g# K
}, {; Y9 {7 S1 S4 ?/ q# \: [/ y
});! o% ^% T9 X L9 t+ O
7 S7 Q9 v+ t( H2 ?0 I% ?1 G4 y
$('#close').click(function () {+ {0 a% W% {. t8 `* Y- U: I
ws.close();
, K5 Q# Y0 ]8 P
});
9 m6 s. G0 x7 z
% D' }. f: K0 n. O- Y
$('#send').click(function () {+ @1 z5 k$ U3 o: [* y! Q0 B
if (ws.readyState == WebSocket.OPEN) {9 Y3 O% c% v# ~* o4 l% M
ws.send($("#to").val() + "|" + $('#content').val());
/ f) Z8 D. W0 |1 c9 I$ V; B
}; @/ f, I5 u! i! b" ~4 t4 ^
else {( A0 c2 w( k2 o. c* Y2 z
$('#tips').text('连接已经关闭');
5 i: S9 P% }- g( A f; s
}
5 `8 s; N: g! `9 D* p9 R' C
});
3 Q+ l8 h1 W" G5 D+ q* W; b' ?( r: _
3 A* o) o7 l( |* f
});
$ m; V& E' W: ~' p5 a
</script>
F' C* y% G8 X
</head>
" z) ^0 u& E# _/ } ^
<body>; V& R& p1 f) Y3 ]6 ?8 w9 O
<div>9 U" D6 s$ ~( Z/ T
<input id="user" type="text" />
* X2 s" n/ m/ a: _# A8 C. ?
<input id="conn" type="button" value="连接" />( ~% e2 c# \ W# @7 k" o
<input id="close" type="button" value="关闭"/><br />2 U: I3 `. h7 s, m& B* R* I
<span id="tips"></span>- I3 P8 t9 C+ d
<input id="content" type="text" />
" b, x; z& \; J5 _
<input id="send" type="button" value="发送"/><br />3 h) r. `6 L d: I/ U
<input id="to" type="text" />目的用户% `& ?& C' }# m8 }% `, o7 Q b! b
<div id="msg">' q/ }; C2 P' Z& o
</div>! K4 I7 s( W$ U+ J& `1 U' O
</div>
: F( E- c6 {5 b8 f/ l' M1 w
</body>: X) Y: \& ~5 Z H( {6 D
</html>

复制代码

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

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

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

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

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

浏览过的版块