在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>8 n, Q# ^5 v1 R4 D- u5 m, J
<html xmlns="http://www.w3.org/1999/xhtml">7 s6 {# U% I. T4 T9 M# O) T- p
<head>
6 F% N1 t" d( \- ?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
! Q2 ~3 T) i+ N9 I$ z' S7 a: {$ n
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
" @) V" [9 O6 K8 r. c
<title></title>% L& a9 @! I Q2 |5 @, K+ g/ ?
<script src="http://code.jquery.com/jquery-1.4.1.min.js"></script>2 x) M, v6 L8 E& R
<script>7 X- }/ Q6 s# X' j4 s" M, S- r
var ws;
( l- X' p2 A' N" v P+ ?9 n
$().ready(function () {
* @* |4 {% i! l ^% @. O4 A
$('#conn').click(function () {
' E) {3 S8 {) K0 P3 @8 j
//ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/Handler1.ashx?user=' + $("#user").val());+ \2 y4 N# ~6 c. m0 t
ws = new WebSocket('ws://192.168.85.128:8086/Handler1.ashx?user=' + $("#user").val());
% @8 z# v6 E. B& h2 K% t
//var host = 'ws://192.168.85.128:8085/api/WSChat?user='+$("#user").val();
3 |) e# q5 @, O
//var host = "ws://192.168.85.128:8085/api/WSChat";
# \( V8 G' X e$ r# j
//webSocket = new WebSocket(host);
! Z0 S" `, k1 ]1 W! ~
" z8 @6 s) V8 G- m: k; v( A1 G0 e
$('#msg').append('<p>正在连接</p>');* o; p0 j9 ]7 @% y' k1 f4 Y8 H
* w. X: Y. G( `; w0 I
ws.onopen = function () {4 e4 I& w& D( Z9 N9 L1 ]
$('#msg').append('<p>已经连接</p>');$ u' p a0 w7 Z3 T x
}, B1 r I: i' i1 c
ws.onmessage = function (evt) {. _* M7 k2 _7 O
$('#msg').append('<p>' + evt.data + '</p>');
! i0 t, r0 H6 p4 K7 K6 \7 D3 e
}
3 w5 W9 Z' Y/ Q- n
ws.onerror = function (evt) {
4 N& V2 T! x8 D( w, v, m- G
$('#msg').append('<p>' + JSON.stringify(evt) + '</p>');8 ^. }8 A+ G$ y+ j# U
}7 E6 t- L$ z$ o8 C u1 A7 n9 J
ws.onclose = function () {
( J( ~0 ~5 Y1 u& ] E; C) [3 f
$('#msg').append('<p>已经关闭</p>');: O9 f$ i$ s$ ]" A
}
( q: n6 j" Z: n2 R% o- t
});- o4 I6 P+ v6 W$ Q* C) F3 [
. @/ @- y0 [# j- {
$('#close').click(function () {
b/ y) O1 F) S6 m$ s
ws.close();2 [1 P# j4 z0 y$ ~+ Z8 @
});( Z" {2 h# p+ ?# o2 J/ ], O5 ?
+ V B6 [3 E) ]! r
$('#send').click(function () {
$ p( L. m6 q3 ?1 k# s7 o
if (ws.readyState == WebSocket.OPEN) {* \$ x3 J8 u3 M `2 x( E5 }8 e$ d
ws.send($("#to").val() + "|" + $('#content').val());
4 e6 m# Q9 p! P; s) L4 h
}8 I w* }1 l0 J8 F1 Y! {
else {
; a& p7 D @3 V4 t& F, f3 n+ m
$('#tips').text('连接已经关闭');9 j0 X" v: x+ x! {% {! r
}6 [3 S. A( u1 |# ^
});2 m9 x S2 I0 K9 ~5 M# ?2 O* s
8 z1 b/ Q, G3 {0 m0 L, u6 ~* P8 g
});
( z, d8 y6 L6 E- W
</script>. y. D7 u* l" ]) F; ~9 S6 }, t" a
</head>
& i7 P: D4 W% p: w, S# A) a
<body>+ E) W" G# P/ y* B
<div>: M- E0 a' n, R R, ]& Z
<input id="user" type="text" />
; t4 j7 i- ^7 c0 W& M- u# _
<input id="conn" type="button" value="连接" />
: ^% a e2 b9 _0 ]& u. @* q
<input id="close" type="button" value="关闭"/><br />
3 c/ x* C: ?* [' V8 [& S
<span id="tips"></span> ~: D$ y9 Y! }9 b
<input id="content" type="text" />2 O" ?' w) z0 i# V2 d
<input id="send" type="button" value="发送"/><br />
$ z; L! m; i! y: W
<input id="to" type="text" />目的用户+ d4 x% c& b. e: W& c
<div id="msg">( v3 o. \% H# [6 \. ^
</div>4 b* V2 G; h- r9 H5 D- k
</div>% p& w, h) K% g' L: r: w* g
</body>! _/ C2 H( I- S* f% d& g
</html>

复制代码

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

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

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

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

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

浏览过的版块