oa-system/src/components/child/test.vue

<!-- <template>
	<div class="hello">
	  <div id="message" v-html="remsg"></div>
	  <input type="text" placeholder="请输入用户名" v-model="user" />
	  <input type="text"  placeholder="请输入内容" v-model="msg">
	  <button  @click="handle">发送消息</button>
	</div>
  </template>
  
  <script>
  
  import * as signalR from "@aspnet/signalr";
  
  let token=JSON.parse(localStorage.getItem('userinif')).token;
  let hubUrl = "http://132.232.92.186:8888/chatHub";
  
  //.net core 版本中默认不会自动重连，需手动调用 withAutomaticReconnect 
  const connection = new signalR.HubConnectionBuilder()
		// .withAutomaticReconnect()//断线自动重连
		.withUrl(hubUrl,{ accessTokenFactory: () => token })//传递参数Query["access_token"]
		.build();
  
  //启动
  connection.start().catch(err => {
	console.log(err);
  });
  
  //自动重连成功后的处理
//   connection.onreconnected(connectionId => {
// 	  console.log(connectionId);
//   });
  
  export default {
	name: "First",
	mounted() {
	  var _this = this;
  
	  //调用后端方法 SendMessageResponse 接收定时数据
	  connection.on("SendMessageResponse", function(data) {
		if(data.state==200)
			_this.remsg = _this.remsg + "<br>" + "定时数据:" + data.msg;
	  });
  
	  //调用后端方法 SendMessage 接受自己人发送消息
	  connection.on("SendMessage", function(data) {
		if(data.state==200)
			_this.remsg = _this.remsg + "<br>" + data.data.userName + ":" + data.msg;
	  });
  
	  //调用后端方法 ConnectResponse 接收连接成功
	  connection.on("ConnectResponse", function(data) {
		if(data.state==200)
			_this.remsg = _this.remsg + "<br>" + "连接:" + data.msg;
	  });
  
	},
	data() {
	  return {
		user: "",
		msg: "",
		remsg: ""
	  };
	},
  
	methods: {
	  handle: function() {
		if(this.msg.trim()==""){
		  alert("不能发送空白消息");
		  return;
		}
		//调用后端方法 SendMessage 传入参数
		connection.invoke("SendMessage", this.user, this.msg);
		this.msg = "";
	  }
	}
  };
  </script>
  
 Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  #message {
  
	overflow-y:auto;
	text-align: left;
	border: #42b983 solid 1px;
	height: 500px;
  
  }
  
  </style>